jquery list / anchor click странное поведение ~ - PullRequest
Новая
       21

jquery list / anchor click странное поведение ~

0 голосов
/ 01 сентября 2010

JQUERY: 

<script type="text/javascript">
 $(document).ready(function() {
  $('li.directory > ul').css('display','none');
  $('li.directory').click(function () {
   $(this).toggleClass('expanded');
   $('ul', this).slideToggle('slow');
  });

 });
</script>

HTML: исправлена ​​разметка для демо 

<ul>
  <li class="directory"><a href="#">Parent Link</a>
    <ul>
      <li><a href="#">Sibling Link</a></li>
      <li><a href="#">Sibling Link</a></li>
      <li><a href="#">Sibling Link</a></li>
    </ul>
  </li>
  <li class="directory"><a href="#">Parent 2 Link</a>
    <ul>
      <li><a href="#">Sibling Link</a></li>
      <li><a href="#">Sibling Link</a></li>
      <li><a href="#">Sibling Link</a></li>
    </ul>
  </li>
</ul>

Это читает мне: Когда документготов, скрыть любой UL с родительским LI класса «каталог».Если щелкнуть LI с классом «directory», добавьте «расширенный» класс (display: block) и slideToggle дочернего UL для просмотра.

Если LI.directory щелкается снова, скрыть дочернийСнова UL.

Это отлично работает.По какой-то причине, это поведение слайдов применяется, когда я щелкаю Sibliing LI.Мой JQUERY (я полагаю) выбирает только LI с классом каталога?Так почему это должно повлиять на LI без классов.

Я создаю как интерактивное дерево документов, и оно отлично работает, за исключением дочерних LI, запускающих событие SlideToggle.

Есть идеи?

Спасибо!

Ответы [ 3 ]

2 голосов
/ 01 сентября 2010

Ни у кого из ваших ul нет родителей с классом .directory <- они закрываются до начала <code>ul.

Попробуйте это: 

<ul>
  <li class="directory">
     <a href="#">Parent Link</a>
     <ul>
        <li><a href="#">Sibling Link</a></li>
        <li><a href="#">Sibling Link</a></li>
        <li><a href="#">Sibling Link</a></li>
     </ul>
   </li>
</ul>

Рабочий пример: http://jsfiddle.net/GdCrr/

1 голос
/ 01 сентября 2010

Основная проблема заключается в том, что щелчок на дочернем элементе <li> по-прежнему является щелчком внутри родительского элемента <li>, и поэтому click событие всплывает , вызывая родительский обработчик событий.Чтобы предотвратить это, вы можете использовать event.stopPropagation() на любом уровне, прежде чем он туда попадет, например: 

$("li.directory li").click(function(e) {
  e.stopPropagation();
});

Или, переписать немного, чтобы поместить его в дочерний элемент <ul> вы уже имеете дело с: 

$(function() {
  $('li.directory').click(function () {
    $(this).toggleClass('expanded').children('ul').slideToggle('slow');
  }).children('ul').hide().click(function(e) {
    e.stopPropagation();
  });
});​

Вы можете попробовать здесь

1 голос
/ 01 сентября 2010

Есть довольно много вещей, которые неправильны или странны в коде, который вы дали.Во-первых, HTML-код недействителен.Для создания списков второго уровня, таких как

  • Первый уровень
    • Второй уровень

Ваш список ul должен находиться внутриli.На самом деле, ничего не должно быть найдено в списках ol и ul, кроме элементов списка li.Точно так же li также не должен появляться нигде, кроме как в списках.Тот факт, что HTML-код является недействительным, является достаточной причиной для того, чтобы эффекты стали бесполезными.

Кроме того, такие строки, как 

$('li.directory > ul').css('display','none');

Можно записать лучше как 

$('li.directory > ul').hide();

Старайтесь не использовать контекст, например $('ul', this), хотя бы потому, что$(this).children('ul') более читабельно.

Редактировать Ну, в этом случае комментарий @ jensgram является правдоподобным - поскольку ссылки внутри li.directory являются дочерними, нажатие на них также означает нажатие на их родителей.Так что вам нужно ограничить свой обработчик событий привязкой внутри каждого li.directory, например так: 

$('li.directory > a').click(function(event) {
    var current = $(this);

    current.parent().toggleClass('expanded');
    current.next().slideToggle('slow');

    return false;
});

Обратите внимание, что я также изменил часть кода обхода DOM для работы с новымселектор.Смотрите в прямом эфире здесь: http://www.jsfiddle.net/Yq8U3/

...