javascript - JQuery 导航树点击打开/关闭

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() 告诉我们，该事件是在此处处理的，并且不需要在父元素上触发。

要查看差异，请单击这两个 fiddle 中“项目 4”下的“子项目 2”:

With stopping propagation.

Without stopping propagation.

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