Sub-menu effect with jquery

Question

I’m trying to build a menu system with sub-menu in jquery, but when I click on a menu, all sub-menus open, as I solve this?

$(document).ready(function() {

  // Fecha Sidenav
  $("#Close_Sidenav").click(function() {

    $('#mySidenav').css({
      "width": "0px"
    });
  });

  // Abre Sidenav
  $("#Open_Sidenav").click(function() {

    $('#mySidenav').css({
      "width": "300px"
    });
  });

  // Abre sub menu
  $(".sidenav_menu").click(function() {

    $(".sidenav_menu ul").show();
  });
});

.context_menu, .sidenav_menu { 
    padding: 12px 8px;
    cursor: pointer;
    display: block; 
    color: #484848;
    border-left: 7px solid #FFFFFF;
}
.context_menu:hover, .sidenav_menu:hover { 
    background: #EEEEEE; 
    border-left: 7px solid #0091FF;
}
/*====================================================================================================================*/
/* Side Navigation */
/*====================================================================================================================*/
.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #FFFFFF;
    overflow-x: hidden;
    transition: 0.5s;
}
.sidenav .sidenav-head {
    top: 0;
    height: 169px;
    width: 300px;
    background-image: url("../Img/bg-sidenav.png");
}
.sidenav .sidenav-head .close {
    color: #000;

    cursor: pointer;
}
.sidenav-head-txt {
    color: #FFFFFF;
    margin: 10px;
  background-color: #000;
}
.sidenav_menu ul {
    display: none;
}
.sidenav_menu ul li { 
    margin-left: -30px;
    padding: 12px 8px;
    cursor: pointer;
    display: block; 
    color: #484848;
    border-left: 7px solid #EEEEEE;
}
.sidenav_menu ul li:hover { 
    background: #EEF2F5; 
    border-left: 7px solid #FBBC05;
}


/* Mobile */
@media only screen and (max-width: 550px) {

    .sidenav .sidenav-head .close {
        cursor: none;
    }
    .sidenav_menu {
        padding: 22px 8px;
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>


<span style="font-size:30px;cursor:pointer" id="Open_Sidenav">&#9776; open</span>


<!-- Side Navigation -->
<div id="mySidenav" class="sidenav">

  <div class="sidenav-head">
    <div class="close" id="Close_Sidenav">
      <b>X close</b>
    </div>
    <div class="sidenav-head-txt">
      texto texto
    </div>
  </div>

  <div class="sidenav_menu">MENU 1
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
    </ul>
  </div>

  <div class="sidenav_menu">MENU 2
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
    </ul>
  </div>

  <div class="sidenav_menu">MENU 3
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
    </ul>
  </div>










</div>

Answer 1

Dude, the problem was the selector you used. When using ". sidenav_menu ul", you are calling all ul belonging to the sidenav class. Then use the function "slideToggle" (open and close with sliding effect) and as selector use "this" and give a . find() in the "ul" element, which will call only the element that called the function, in which case it will be the specific "sidenav". The code below has been tested and works.

$(document).ready(function() {

    // Fecha Sidenav
    $("#Close_Sidenav").click(function() {

        $('#mySidenav').css({
            "width": "0px"
        });
    });

    // Abre Sidenav
    $("#Open_Sidenav").click(function() {

        $('#mySidenav').css({
            "width": "300px"
        });
    });

    // Abre sub menu
    $(".sidenav_menu").click(function() {
        $(".sidenav_menu ul").hide();
        $(this).find("ul").slideToggle();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>