Question

我不是JQuery或javascript专家，我的网站导航没什么问题。我的导航看起来像典型的Windows资源管理导航，例如：

Title
    subtitle
    subtitle
        subsubtile
    subtitle
Title
    subtitle

我希望它的工作方式与典型的Windows资源管理导航相同，当我点击标题字幕时可以看到，当我重新点击标题时，它会隐藏点击的标题字幕。

使用以下代码我可以打开标题，但不知道如何关闭它们。

$( document ).ready(function() {
    $('#navigation').click(function() {
        $('#navigation ul li:hover').children('#navigation ul li ul').slideDown(400);
    });
})

Answer 1

jQuery中有一个方便的简写：.slideToggle()

如果当前没有，则会显示所选元素，反之亦然。

另一个重要的部分是，您可以在事件处理程序中使用$(this)。它是处理事件的元素。

同样.children()是tree traversal函数。这意味着它的结果将相对于调用它的所选元素进行选择。因此，$('#example').children('a')会直接选择示例元素下的所有链接，因此不需要$('#example').children('#example a')。

我已经为你包装了代码：

$(document).ready(function() {
    $('#navigation ul li').click(function(e) {
        e.stopPropagation();
        $(this).children('ul').slideToggle(400);
    });
});

或者，如果您希望有1个事件处理程序和冒泡：

$(function() {
    $('#navigation').on('click', 'li', function(e) {
        e.stopPropagation();
        $(this).children('ul').slideToggle(400);
    });
});

当然，如果您切换的<ul>是您点击事件的<li>的直接子项，则这两项工作正常。

修改：

作为评论中提到的@thebreiflabb，由于事件冒泡，默认情况下将点击事件的每个父元素都会触发点击事件。

如果任何父项也匹配选择器，则将在它们上调用相同的事件处理程序。

e.stopPropagation()告诉我，事件在此处理，不需要触发父元素。

要查看差异，请点击这两个小提琴中“项目4”下的“子项2”：

With stopping propagation.

Without stopping propagation.

如您所见，没有stopPropagation()“第4项”也会关闭。

单击JQuery导航树打开/关闭

1 个答案: