点击JQuery导航树打开/关闭

我不是JQuery或JavaScript专家，我的网站导航没有问题。我的导航看起来像典型的Windows资源管理导航如：点击JQuery导航树打开/关闭

Title 
    subtitle 
    subtitle 
     subsubtile 
    subtitle 
Title 
    subtitle

我想它的工作原理是一样的典型的Windows资源管理导航，当我点击标题字幕将能够看到，当我reclick标题是隐藏点击的标题字幕。

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

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

来源

2013-05-02 qwauk

首先你需要知道如何关闭它们，有很多方法可以做到这一点。 – 2013-05-02 14:50:18

尝试在mouseout上使用slideUp功能 – 2013-05-02 14:55:15

有jQuery中方便的速记：.slideToggle()

，如果它是目前还没有和VICA，反之亦然选定的元素将被显示。

另一个重要部分是，您可以在事件处理程序中使用$(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()告诉，事件在这里被处理，它不需要在父元素上触发。

要查看 “子项目2” 的区别点击 “项目4” 下，在这两个小提琴的：

With stopping propagation.

Without stopping propagation.

正如你所看到的，没有stopPropagation() “项目4”也关闭。

来源

2013-05-02 14:56:49 SoonDead

是的，这是有效的，但由于子子级别等原因，只有一个小的增加。您需要停止传播以不关闭较高级的项目。 HTTP：//的jsfiddle。net/mtCyS/ – thebreiflabb 2013-05-02 15:06:17

所以如此。谢谢。 – SoonDead 2013-05-02 15:08:04

我也在你的小提琴中加入了我的答案。 – SoonDead 2013-05-02 15:21:09

点击JQuery导航树打开/关闭

回答

相关问题