Javascript JQuery导航树单击打开/关闭

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

---

jQuery中有一个方便的速记：

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

另一个重要部分是，您可以在事件处理程序中使用

$（this）

。它是处理事件的元素

也是一个函数。这意味着将相对于调用它的选定元素选择它的结果。因此

$（'#示例'）.children（'a'）

将直接选择example元素下的所有链接，因此不需要

$（'#示例'）.children（'#示例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);
    });
});

当然，只有当您切换的

是您触发单击事件的

的直接子项时，这两个选项才起作用

编辑：

正如注释中提到的@thebreiflab，由于事件冒泡，默认情况下，click事件将在clicked元素的每个父元素上激发

如果任何父级也与选择器匹配，则将对它们调用相同的事件处理程序

说明事件在此处处理，不需要在父元素上激发

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

---

如您所见，如果不使用

stopPropagation（）

，“第4项”也将关闭。

jQuery中有一个方便的速记：

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

另一个重要部分是，您可以在事件处理程序中使用

$（this）

。它是处理事件的元素

也是一个函数。这意味着将相对于调用它的选定元素选择它的结果。因此

$（'#示例'）.children（'a'）

将直接选择example元素下的所有链接，因此不需要

$（'#示例'）.children（'#示例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);
    });
});

当然，只有当您切换的

是您触发单击事件的

的直接子项时，这两个选项才起作用

编辑：

正如注释中提到的@thebreiflab，由于事件冒泡，默认情况下，click事件将在clicked元素的每个父元素上激发

如果任何父级也与选择器匹配，则将对它们调用相同的事件处理程序

说明事件在此处处理，不需要在父元素上激发

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

---

正如您所见，如果没有

stopPropagation（），

“第4项”也会关闭。

首先，您需要知道如何关闭它们，有很多方法。尝试在鼠标上使用slideUp函数首先，您需要知道如何关闭它们，有很多方法。尝试在鼠标上使用slideUp函数这很有效，然而，由于子级别等原因，只有一个小的添加。您需要停止传播以不关闭较高的项目。我也在我的答案中加入了你的提琴。是的，这是有效的，但是由于子级别等原因，只有一个小的添加。您需要停止传播以不关闭较高的项目。我的回答中也加入了你的调子。