Jquery селекторы вопрос

Question

Я не эксперт в jquery, но пытаюсь заставить работать меню.По сути, у меня есть меню, состоящее из 3 уровней вложенных списков.На первом уровне есть маленькая стрелка, фоновое изображение, которое открывается или закрывается при открытии списка первого уровня.Любые другие вложенные списки не должны иметь фоновое изображение.Мой скрипт открывает меню, когда вы щелкаете по нему, а также должен переключать список первого уровня с класса «неактивный» на класс «активный».Вот сценарий:

$(document).ready(function(){

$("#left-navigation-holder ul.level1 li.inactive").toggle(function(){

$(this).addClass("active");

}, function () {

$(this).removeClass("active");

});


$("#left-navigation-holder li a").click(function(){

menu = $(this).parent('li').children('ul');

menu.toggle();

});

});

Проблема заключается в том, что функция переключения также происходит при нажатии на списки второго и третьего уровней, в результате чего стрелки переключаются, даже если в списке первого уровня не щелкают.Я подумал, что с помощью $ ("# left-navigation-holder ul.level1 li.inactive"). Toggle ограничит функцию списком первого уровня с классом "неактивный"..

Бен

Answer 1

Используйте непосредственный дочерний селектор, например:

$("#left-navigation-holder ul.level1 > li.inactive")
//or...
$("#left-navigation-holder > ul > li > a")

В ваших селекторах ul.level1 li.inactive означает <li class="inactive"> в любом месте ниже <ul class="level1">, помещая > чтобы сделать это ul.level1 > li.inactive говорит, что соответствует только <li> непосредственно ниже этого <ul>, а не любому количеству уровней ниже.

Возможно, вы могли бы сделать это в целом, удалив это .level1, если оно не служит другой цели:

$("#left-navigation-holder > ul > li.inactive")

Answer 2

Ну, я вернулся. Сегодня утром я тестировал свой код и понял, что список, в котором нет подуровня, больше не работает правильно. Если я установлю ссылку на них, нажатие не отправит меня на запрошенный URL, а только вызовет изменение класса между «активным» и «неактивным». Код выглядит сейчас так:

$ (документ) .ready (функция () {

$(".left-navigation-holder li a").click(function(){
    menu = $(this).parent('li').children('ul');
    menu.toggle();
});

$(".left-navigation-holder ul.level1 > li").toggle(function(){
    $(this).addClass("active");
    }, function () {
    $(this).removeClass("active");
});

$(".left-navigation-holder ul > li > ul").click(function(toggle) {
    toggle.stopPropagation();
    return false;
});

});

Если я уберу функцию переключения, ссылки будут работать.

Я почти уверен, что это простое решение, но я должен сказать, что мои знания довольно плохие. Спасибо, Бен

Answer 3

Вы можете использовать $("#left-navigation-holder ul > li.inactive"), который выбирает только прямых потомков списка (с помощью селектора >).