Question

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>

这告诉我：文档准备就绪后，隐藏任何具有“目录”类的父LI的UL。如果单击带有“目录”类的LI，则添加“展开”类（显示：块），然后将子映射幻灯片切换到视图中。

如果再次单击LI.directory，请再次隐藏子UL。

这很好用。出于某种原因，当我单击sibliing LI时，将应用此幻灯片行为。我的JQUERY（我相信）只选择带有一类目录的LI？那么为什么无类别的LI会受到影响呢。

我正在创建一个交互式文档树，除了子LI触发SlideToggle事件外，它工作正常。

有什么想法吗？

谢谢！

Answer 1

ul所有.directory的父母都没有ul＆lt; - 他们在<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>开始之前被关闭了。

试试这个：

{{1}}

一个工作示例：http://jsfiddle.net/GdCrr/

Answer 2

你提供的代码有很多错误或奇怪的地方。首先，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 traveal代码以使用新的选择器。在此处观看：http://www.jsfiddle.net/Yq8U3/

Answer 3

核心问题是点击儿童<li>仍然是父亲<li>内的点击，因此click事件bubbles up会触发父事件处理程序。为防止这种情况发生，您可以在任何级别使用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();
  });
});

You can give it a try here

jquery list / anchor点击奇怪的行为〜

3 个答案: