0

Estou tentando montar um sistema de menu com sub-menu em jquery, porem quando clica em um menu, todos os sub-menu se abrem, como resolvo isso?

$(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>

1
  • Vou dar uma olhada aqui pra vc Commented 16/12/2016 às 17:36

1 Resposta 1

1

Cara, o problema era no seletor que você usou. Ao usar ".sidenav_menu ul", você está chamando todas as ul pertencentes à classe sidenav. Então use a função "slideToggle" (abre e fecha com efeito de deslizar) e como seletor use "this" e dê um .find() no elemento "ul", que vai chamar apenas o elemento que chamou a função, nesse caso sera a "sidenav" específica. O código abaixo foi testado e funciona.

$(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>

4
  • Muito bom show de bola. Obrigado Commented 16/12/2016 às 17:54
  • So mais uma coisa, notei que se eu clico em outro menu o que esta aberto não fecha, tem como arrumar isso tbm? Commented 16/12/2016 às 17:56
  • olha ai a alteração como ficou Commented 16/12/2016 às 17:57
  • muito bom, sem querer abusar, quando clico no menu que ja esta aberto com faço para ele fechar? Commented 16/12/2016 às 18:38

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .