CODEWITHSUNDEEP
jquery
Future Webs
Future Webs

Reputation: 239

jQuery menu with sub menu trigger

I am trying to create a trigger for an HTML menu which when clicked will toggle sub menus. The problem with the following code is when you click the trigger (class="open") it toggles all the submenu items at once. I'd like the trigger to toggle one sub menu at a time using jQuery. Here is my code:

HTML

<ul>
 <li class="menu-item-has-children">Item 1</li>
   <a class="open">+</a>
   <ul class="sub-menu">
     <li>Sub Item 1</li>
     <li>Sub Item 2</li>
     <li class="menu-item-has-children">Sub Item 3</li>
     <a class="open">+</a>
       <ul class="sub-menu">
         <li>Sub Sub Item 1</li>
         <li>Sub Sub Item 2</li>
         <li>Sub Sub Item 3</li>
         <li>Sub Sub Item 4</li>
         <li>Sub Sub Item 5</li>
      </ul>
   <li>Sub Item 4</li>
   <li>Sub Item 5</li>
</ul>

JQUERY

$(document).ready(function() {
  $('.open').click(function () {
    $('li.menu-item-has-children').parent().closest('.sub-menu').toggle();
  });
});

CSS

ul li {
  list-style-type:none;
}
.open {
  width:20px;
  height:20px;
  background-color:red;
  color:#fff;
  display:block;
  cursor:pointer;
  text-align:center;
 }
 .sub-menu {
  display:none;
 }

VIEW THE JS FIDDLE HERE

Thank you :)

Upvotes: 0

Views: 5864

Answers (2)

Jeric Cruz
Jeric Cruz

Reputation: 1909

other option is to create another class for your sub-menu.

$(document).ready(function() {
	$('.open').click(function () {
		$('li.menu-item-has-children').parent().closest('.sub-menu').toggle();
  });
  
  $('.open-sub1').click(function () {
		$('.sub-menu1').toggle();
  });
});
ul li {
 list-style-type:none;
}
.open, .open-sub1 {
  width:20px;
  height:20px;
  background-color:red;
  color:#fff;
  display:block;
  cursor:pointer;
  text-align:center;
}
.sub-menu, .sub-menu1 {
  display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
  <li class="menu-item-has-children">Item 1</li>
    <a class="open">+</a>
    <ul class="sub-menu">
      <li>Sub Item 1</li>
      <li>Sub Item 2</li>
      <li class="menu-item-has-children">Sub Item 3</li>
        <a class="open-sub1">+</a>
        <ul class="sub-menu1">
          <li>Sub Sub Item 1</li>
          <li>Sub Sub Item 2</li>
          <li>Sub Sub Item 3</li>
          <li>Sub Sub Item 4</li>
          <li>Sub Sub Item 5</li>
        </ul>
      <li>Sub Item 4</li>
      <li>Sub Item 5</li>
    </ul>
</ul>

Upvotes: 0

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167162

There's no contextual this here. It should be:

$(document).ready(function() {
  $('.open').click(function () {
    $(this).next('.sub-menu').toggle();
  });
});

When you are using the $('li.menu-item-has-children'), it selects literally everything and not the one that's clicked upon. The current element that fired the click event can be got through the this keyword and I have used it above to make it work. Since you have a perfect structure like the submenu follows the <a>, the above code works with .next().

Snippet

$(document).ready(function() {
  $('.open').click(function () {
    $(this).next('.sub-menu').toggle();
  });
});
ul li {
 list-style-type:none;
}
.open {
  width:20px;
  height:20px;
  background-color:red;
  color:#fff;
  display:block;
  cursor:pointer;
  text-align:center;
}
.sub-menu {
  display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="menu-item-has-children">Item 1</li>
  <a class="open">+</a>
  <ul class="sub-menu">
    <li>Sub Item 1</li>
    <li>Sub Item 2</li>
    <li class="menu-item-has-children">Sub Item 3</li>
    <a class="open">+</a>
    <ul class="sub-menu">
      <li>Sub Sub Item 1</li>
      <li>Sub Sub Item 2</li>
      <li>Sub Sub Item 3</li>
      <li>Sub Sub Item 4</li>
      <li>Sub Sub Item 5</li>
    </ul>
    <li>Sub Item 4</li>
    <li>Sub Item 5</li>
  </ul>
</ul>

JSFiddle: https://jsfiddle.net/bdh7seoh/

Upvotes: 1

Related Questions