点击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);
});
})
有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” 下,在这两个小提琴的:
正如你所看到的,没有stopPropagation()
“项目4”也关闭。
是的,这是有效的,但由于子子级别等原因,只有一个小的增加。您需要停止传播以不关闭较高级的项目。 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
首先你需要知道如何关闭它们,有很多方法可以做到这一点。 – 2013-05-02 14:50:18
尝试在mouseout上使用slideUp功能 – 2013-05-02 14:55:15