jQuery, fadeToggle и элементы списка

#javascript #jquery #css #jquery-animate

#javascript #jquery #css #jquery-анимировать

Вопрос:

Итак, хорошо. Я пытаюсь создать своего рода выпадающее меню, используя fadeToggle().

http://westrock.juggernautwebsites.com / — это то место, где в настоящее время находится сайт.

Как вы можете видеть, когда пользователь выбирает ‘Properties’, происходит fadeToggle. Однако после выпадающего списка и пользователь хочет выбрать li из выпадающего списка свойств, он не может этого сделать (я знаю, что у меня есть return false; set, но это должно было быть для исходного ul, нет?)

Кроме того, когда отображаются дочерние элементы, при наведении курсора мыши на About эффект :hover отображается на дочернем элементе свойств li.

Я поражен. Любая помощь, с благодарностью.

 $('#menu-item-13').click(function() {
    $(this).children('ul').fadeToggle({
        duration: 200
    });
    return false;
});

* РЕДАКТИРОВАТЬ
Я чувствую, что мне нужно ограничить влияние css и jQuery на дочерние элементы списка и a, но я не знаю, как это сделать. Я думал, что дочерние элементы переходят только на один уровень вниз по DOM, и поскольку я выбрал ‘ul’, функция не повлияет на элементы списка…

Ответ №1:

Ваш пример для меня вообще не работает, но, если я вас правильно понимаю, вы хотите, чтобы на дочерний элемент ul не влиял обработчик щелчков, прикрепленный к родительскому элементу. Вы можете сделать это:

 $('#menu-item-13 > ul').click(function(e){
   e.stopPropagation();

   // ... do your thing
});

Это в основном останавливает переход щелчка по ul к родительскому #menu-item-13 элементу. Из-за этого fadeToggle также не будет запускаться при нажатии на ul, поэтому, если это все еще необходимо, вам придется добавить это в ul щелчок.

1. Извините, я, должно быть, работал над этим или чем-то еще в то время. Я добавил e.stopPropagation, но я не могу запустить fadeToggle, нажав на Свойства.

2. $('#primary li a').click(function(e) { $(this).next().fadeToggle({ duration: 200 }); return false; }); делает в основном то, что я хочу, однако возвращает false; отключает все привязки в навигаторе, где я хочу отключить только ссылки, у которых есть дочерние элементы (т. Е. выпадающие уровни)

3. Похоже, у вас уже есть отдельные классы для элементов, которые отличают это, так почему бы не использовать это? .menu-item-type-custom

Ответ №2:

Спасибо всем за помощь! Вот что я в конечном итоге использовал.

 $('#primary li').hover(function() {
    $(this).children('ul').fadeToggle({
        duration: 200
    });
});
    $('menu-item-54').click(function() {
    return false;
});

То, что я пытался выполнить, при наведении курсора мыши (или щелчке) открывался subnav.