嵌套的ul元素上的jquery委托展开/折叠功能
嵌套的ul元素上的jquery委托展开/折叠功能
提问于 2012-06-07 13:44:56
我有一个嵌套的ul“树”，为了这个问题，它只在顶部有两个级别和几个子元素，但是如果你可以假设从顶部的ul (这里以id="group"为目标)可能有几个嵌套的元素，但它们总是遵循这个结构。目前，我只让top元素在折叠时折叠它们的子ul元素。我想在所有的ul元素中实现这一特性。此外，我还希望折叠另一个单击的“相同级别”的打开元素，以便只有一个ul和另一个ul是打开的。我希望我已经解释了我想要实现的功能。我觉得我应该使用slideToggle()，但每次尝试都以失败告终……我还应该说，这是我实际使用delegate()的第一手，但我了解它的传播(“事件冒泡”)，这也是我觉得这是完成这样一项任务的方式的部分原因。另一种情况是我可能需要将新元素附加到ul中。所以这就是我目前所拥有的：
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('ul#group').delegate('a', 'click', function(event) {
if($(event.target).next().is(':visible')) {
if($(event.target).next()) {
$(event.target).next().find('ul').slideUp(250, function() {
$(event.target).next().slideUp(250);
});
}
} else {
$(event.target).next().slideDown(250);
}
});
});
</script>
<ul id="group">
<li>
<a href="#" onclick="return false;">Foo Bar 1</a>
<ul>
<li>
<a href="#" onclick="return false;">Foo 1</a>
<ul>
<li>
<a href="#" onclick="return false;">Bar 1</a>
</li>
</ul>
</li>
<li>
<a href="#" onclick="return false;">Foo 2</a>
<ul>
<li>
<a href="#" onclick="return false;">Bar 2</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#" onclick="return false;">Bar Foo 2</a>
<ul>
<li>
<a href="#" onclick="return false;">Bar 1</a>
<ul>
<li>
<a href="#" onclick="return false;">Foo 1</a>
</li>
</ul>
</li>
<li>
<a href="#" onclick="return false;">Bar 2</a>
<ul>
<li>
<a href="#" onclick="return false;">Foo 2</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>下面是测试用例的jsfiddle link。欢迎以最好的方式完成所有的输入。
回答 3
Stack Overflow用户
回答已采纳
发布于 2012-06-07 13:57:09
你想要的是这样的东西吗：http://jsfiddle.net/GSEDy/3/
我做了一些编辑。
$('ul#group').delegate('a', 'click', function(event) {
if ($(event.target).next().is(':visible')) {
$(event.target).next().find('ul').slideUp(250, function() {
$(event.target).next().slideUp(250);
});
} else {
$(event.target).parent().siblings().find("ul").slideUp(250);
$(event.target).next().slideDown(250);
}
});Stack Overflow用户
发布于 2012-06-07 14:16:34
更简单的一个：
$('ul#group').delegate('a', 'click', function(event) {
$(this).parent().children('ul').slideToggle(250);
});
// At beginning hide elements preferably with css
$('ul#group').find('ul').hide();而不会折叠同一级别的元素。
Here it is。
Stack Overflow用户
发布于 2012-06-07 14:28:06
虽然我更喜欢其他解决方案，但为了举例，我将提供一条替代路线。不久前，我制作了一个创建clickOut伪事件的jQuery插件，在这个插件中，我使用了精简版本。这样做的好处是，用户可以在菜单之外单击，菜单将折叠。http://jsfiddle.net/GSEDy/7/
$('#group li').click(function (event) {
'use strict';
$(this).children('ul').slideToggle(250, function () {
$(this).find('ul').hide();
});
$(this).siblings().children('ul').each(function () {
$(this).slideUp(250, function () {
$(this).find('ul').hide();
});
});
event.stopPropagation();
}).clickOut(function () {
'use strict';
$(this).children('ul').slideUp(250, function () {
$(this).find('ul').hide();
});
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/10926286
复制相关文章
相似问题
腾讯云开发者
