0

我不是 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);
    });
})
4

1 回答 1

3

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

如果当前未显示所选元素，则将显示该元素，反之亦然。

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

也是.children()一个树遍历函数。这意味着它的结果将相对于它被调用的选定元素进行选择。所以$('#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()告诉，事件在这里处理，它不需要在父元素上触发。

要查看差异，请单击这两个小提琴中“Item 4”下的“Subitem 2”：

随着停止传播。

不停止传播。

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

于 2013-05-02T14:56:49.343 回答