jQuery: Stop dropdown menu from collapsing when clicking on its children

I have a top nav bar and some of its items trigger dropdowns/slide-downs.

My problem is that whenever I click an item, or actually any area within the dropdown, the dropdown collapses.

What I need help with is figuring out how to avoid collapsing the dropdown when a child element is clicked (or well, anywhere within the dropdown area since I\’d like to account for accidental clicks inside the dropdown but that are not actually clicks on a child element).

Here\’s the basic HTML structure I have:

<ul class=\"dropdown\">
 <li><a href=\"#\" class=\"noclick nojs\">Select your Topic</a>
  <ul class=\"nojs\" >
    <li><a href=\"#\">Link 1</a></li>
    <li><a href=\"#\">Link 2</a></li>
    <li><a href=\"#\">Link 3</a></li>
  </ul>
 </li>
</ul>

My JavaScript:

$(\'.dropdown li\').click(function() {
  //Hide all other drop downs that are visible, and remove the class \'selected\'
  $(this).siblings(\'.selected\').removeClass(\'selected\').find(\'ul:visible\').slideUp(\'fast\');

  //Show/Hide dropdowns
  $(this).toggleClass(\'selected\');
  $(\'ul:first\', this).stop(true, true).slideToggle(\'fast\');
});

Here\’s a DEMO

Any help is greatly appreciated.

Thanks.

Rating: 4 out of 5 based on 4 ratings

Posts Related to jQuery: Stop dropdown menu from collapsing when clicking on its children

• Jul 14th, 2012 jquery - Javascript drop-down menu not working Saturday AM 07:21:30


• Jul 15th, 2012 jquery - Javascript drop-down menu not working Sunday AM 10:12:04


• Aug 27th, 2012 Difference between jquery selectors Monday AM 00:19:37


• Jul 12th, 2012 php - change variable value with a dropdown menu Thursday AM 06:21:40


• Jul 18th, 2012 asp.net - Error invoking Javascript function from .ascx file Wednesday AM 03:29:58


• Jul 19th, 2012 asp.net - Error invoking Javascript function from .ascx file Thursday PM 12:35:54


• Aug 22nd, 2012 recursion - Recursive JavaScript returning after first pass Wednesday PM 16:29:50


• Jul 31st, 2012 html - jQuery with Nested Tables, select outer table tr/td with passed Selector Tuesday AM 04:06:07


• Aug 28th, 2012 javascript - I am trying to make dropdown enabling using jquery Tuesday AM 07:12:19


• Nov 12th, 2012 php - How to submit a form with dropdown selected value only? Monday PM 17:58:50

The post jQuery: Stop dropdown menu from collapsing when clicking on its children appeared first on Javascript ASK.

via Javascript ASK http://javascriptask.phpfogapp.com/jquery-stop-dropdown-menu-from-collapsing-when-clicking-on-its-children.html