Toggle Unordered List Items with jQuery

Question

I'm in a project where non-HTML savvy users will be changing site content in WYSIWYG editors. One page involves an unordered list with a good amount of content. I'd like to be able to toggle the content, but I've run into an issue.

Here's a jsfiddle recreating with my issue: http://jsfiddle.net/eKzbY/

And my javascript:

$(document).ready(function() {
    $('.descrip ul ul').hide();
    $('.descrip ul li').click(function() {
        $(this).children('.subLink').toggle('slow');
    });
    $('.descrip li:has(ul)').addClass('myLink');
    $('.descrip ul ul').addClass('subLink');
});

You can toggle the content under "2" alright, but when you click "2.1" to toggle its content, it toggles both the content under it and the content under "2". I believe this is because clicking "2.1" hits both li's at the same time, toggling both. I'd give everything classes, but these users don't know HTML, so they'd likely struggle when adding more content.

I've been staring at this for too long. Anyone have a solution/better idea?

Answer 1

the problem is, you're assigning the "click" event to every "li". When the inner "li" is clicked, so is the parent. You can prevent this with jQuery's stopPropagation .

use e.stopPropagation();

Like so:

$(document).ready(function() {
    $('.descrip ul ul').hide();
    $('.descrip ul li').click(function(e) {  // inserted callback param "e" meaning "event"
        e.stopPropagation(); // stop click from bubbling up
        $(this).children('.subLink').toggle('slow');
    });
    $('.descrip li:has(ul)').addClass('myLink');
    $('.descrip ul ul').addClass('subLink');
});

Some old menu examples of mine:

• http://jsfiddle.net/SpYk3/QapjP/36/ ( SO )
• http://jsfiddle.net/SpYk3/9Hkxs/22/

Answer 2

I've found a solution - based on SpYk3HH's examples - that provides the desired functionality even if the <li> is a hyperlink.

The click event is bound to a child element created inside the li instead of the li itself:

  $(document).ready(function() { $("ul > li > ul").hide(); $("ul > li").each(function(i) { if ($(this).children("ul").length > 0) { $(this).css("cursor", "pointer").children("ul").before($("<sup class='toggler' />").text(" (+)")); } else { $(this).css("cursor", "default"); }; }); $("ul > li > .toggler").click(function(e) { e.stopPropagation(); // was visible if (!$(this).siblings("ul").is(":visible")) { $(this).text(" (-)"); $(this).parent("li").children("ul").show(); } else { $(this).text(" (+)"); $(this).parent("li").children("ul").hide(); }; }); }); 

 ul > li > ul { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="descrip"> <ul> <li>1 <ul> <li>1.1</li> <li>1.2</li> </ul> </li> <li>2 <ul> <li>2.1 <ul> <li>2.1.1</li> <li>2.1.2</li> </ul> </li> <li>2.2</li> </ul> </li> <li>3</li> </ul> </div>