jQuery or JavaScript menu drop down on click

Question

Right now, I'm trying to build a vertical menu that will have a drop down sub menu below it.

Below is my HTML and the jQuery function I am using:

 $(function() { $('#menusomething > li').click(function(e) { e.stopPropagation(); var $el = $('ul', this); $('#menusomething > li > ul').not($el).slideUp(); $el.stop(true, true).slideToggle(400); }); $('#menusomething > li > ul > li').click(function(e) { e.stopImmediatePropagation(); }); });

 <div id="navmenu"> <ul id="menusomething" style="padding-left:30px"> <li><a href="#">HOME</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">CHAPTERS</a></li> <ul class="submenu"> <li><a href="#">Dallas</a></li> <li><a href="#">Los Angeles</a></li> <li><a href="#">New York</a></li> <li><a href="#">Northern California</a></li> <li><a href="#">Orange County</a></li> <li><a href="#">Phoenix</a></li> <li><a href="#">San Diego</a></li> <li><a href="#">Washington DC</a></li> </ul> <li><a href="#">MEMBER SERVICES</a></li>

Answer 1

Figured out the answer for anyone who sees this. First had to move the closing li tag from chapters to the end of .submenu Then used this and now it works as wanted.

$(function() {
  $('#menusomething li > .submenu').parent().click(function() {
 var submenu = $(this).children('.submenu');
 if ( $(submenu).is(':hidden') ) {
 $(submenu).slideDown(400);
 } else {
 $(submenu).slideUp(400);
 }
});
});

Answer 2

The following code does what I believe you desire: Have a <ul> element that is the nextElementSibling of the first level <li> element slide open and closed when it is clicked. As you mentioned in comments that you desired, it now starts closed due to adding style="display: none;" to the <ul> .

Note: From a user interface perspective, the <li> entries which don't have sub-menus, or are otherwise links, should not have the text enclosed in <a> tags. With the <a> tags the user will think they are clickable, when a click does nothing. This is confusing to a user. It appears that you may have some be sub-menus and some be direct links. If possible, there should be some visual difference between the two types to hint to the user as to what will happen when they click.

Along with other issues, your HTML has nothing that will match either the '#menusomething > li > ul' or the '#menusomething > li > ul > li' selectors. Specifically, you have no <UL> elements that are children of <LI> elements.

 $(function() { $('#menusomething > li').click(function(e) { e.stopPropagation(); var nextSib = this.nextElementSibling; if(nextSib && nextSib.nodeName === 'UL') { //If we get here the nextSib exists and is a <UL> that immediately follows // the <LI> which was clicked. $(nextSib).slideToggle(400); } }); $('#menusomething > ul > li').click(function(e) { console.log('Clicked on chapter: ' + this.textContent); e.stopImmediatePropagation(); }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <div id="navmenu"> <ul id="menusomething" style="padding-left:30px"> <li><a href="#">HOME</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">CHAPTERS</a></li> <ul class="submenu" style="display: none;"> <li><a href="#">Dallas</a></li> <li><a href="#">Los Angeles</a></li> <li><a href="#">New York</a></li> <li><a href="#">Northern California</a></li> <li><a href="#">Orange County</a></li> <li><a href="#">Phoenix</a></li> <li><a href="#">San Diego</a></li> <li><a href="#">Washington DC</a></li> </ul> <li><a href="#">MEMBER SERVICES</a></li> </ul> </div>