2

im having trouble selecting the ul --> li's nested inside a div that resides inside a parent ul --> li. Here is my code:

// Navigation
$(document).ready(function() {

    // Click function

    $(".sidebar ul li a").on("click", function() {
        $(this).parent().addClass('open').find("ul.submenu").stop("true", "true").slideDown().addClass('active');
        $(this).parent().siblings().removeClass('open').find("ul.submenu").stop("true", "true").slideUp().removeClass('active');
        $(this).parent().siblings("ul.submenu.ul.li a").removeClass('open'); //<-- This is not working.
    });

    $(".sidebar ul li ul li a").on("click", function() {
        $(this).parent().addClass('open');
        $(this).parent().siblings().removeClass('open');
    });
});

I commented the part is that is not working, all the rest is working fine. Basically the first function adds the class .open to the clicked li, and opens the nested div containing the child ul, the next line removes the class and closes the div if another li is clicked.

The second group handles adding and removing open class from the ul li ul li's.

The problem is in the third function of the first group, wich is supposed to remove the open class from all ul li ul li's when an ul li is clicked.

Thank you in advance.

4

1 回答 1

0

First thing, you should note that your second click binding is unnecessary as the elements you want to target with ".sidebar ul li ul li a" are already targeted by ".sidebar ul li a" since you're not using the direct descendant selector >, and since you're performing the same actions in both functions you can just remove it.

Also as Arun commented in his answer, you're using the class selector instead of the descendant selector, but still I don't believe fixing that will give you the result you want. I believe doing this will work for you:

$(".sidebar ul li a").on("click", function() {
    $(".open").not($(this).parents('li')).removeClass('open');
    $(this).parent().addClass('open').find("ul.submenu").stop("true", "true").slideDown().addClass('active');
    $(this).parent().siblings().find("ul.submenu").stop("true", "true").slideUp().removeClass('active');
});
于 2013-08-21T07:56:53.590 回答