CODEWITHSUNDEEP
jquerycss
AnchovyLegend
AnchovyLegend

Reputation: 12538

Expandable submenu with sub-sub-menu

So I am trying to create a simple sidebar using nested list elements that are 3 levels deep, so there's a menu, sub-menu, and sub-sub-menu. Everything seems to function as expected, the only problem is, when I'm in the deepest level list element (sub-sub-menu), and I select an option, my jquery events conflict somehow, and it collapses the menu, unintentionally. I tried using class-specific selectors to prevent this problem with no success. I would like the click on a sub-sub-menu to not collapse the parent list.

Also, when a sub-menu is open with sub-sub-menu options and a user selects different sub-menu option (hiding the current sub-menu), then goes back to the initial one that was just collapsed, the sub-sub-menu options are still showing, when they should be hidden.

JQuery

$('.docs-index-li-ul').hide();
$('.doc-index-li > a').click(function(){
    $('.docs-index-li-ul').hide();
    $(this).next('ul').show();
});
$('.doc-index-li .docs-index-li-ul li ul li').hide();
$('.docs-index-li-ul li > a').click(function(){
    $('.docs-index-li-ul li ul li').hide();
    $(this).next('ul').children('li').show();
});

Here's a fiddle:

http://jsfiddle.net/q7vay/

I appreciate any suggestions on why this is happening and how to fix it.

Many thanks in advance!

Upvotes: 0

Views: 459

Answers (1)

George
George

Reputation: 36784

I've done two things:

$('.docs-index-li-ul > li > a').click(function(){

Added a child selector here so that you only get immediate lis reacting. Then added:

$('.doc-index-li .docs-index-li-ul li ul li a').click(function(e){
   e.stopPropagation(); 
});

To stop propagation when those sub-sub-menu anchors are clicked:

JSFiddle

Upvotes: 1

Related Questions