Sub-menu effect with jquery

Question

Sub-menu effect with jquery

Navigation

#1 by (1 votes)

0

I'm trying to set up a menu system with a sub-menu in jquery, but when I click on a menu, all the sub-menus open, how do I solve it?

$(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><spanstyle="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>

javascript jquery css

asked by anonymous 16.12.2016 / 18:33

1 answer

How to format a very large string (arrange text) Regular expression for zip file

score 1 · Accepted Answer

Dude, the problem was in the selector you used. When using ".sidenav_menu ul", you are calling all ul belonging to the sidenav class. Then use the "slideToggle" function and use "this" as a selector and give a .find () in the "ul" element, which will only call the element that called the function, in which case it will be to 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>