jQuery:切换-列表 [英] jQuery: Toggle - List

问题描述

这是从此处开始的延续: jQuery:列表在页面加载时扩展

自从我上一篇文章以来，我已经处理了另一个列表，并提出了以下内容: http://jsbin .com/emaza4/4

Since my previous post, I've worked on another list and come up with this: http://jsbin.com/emaza4/4

如您所见，带有<ul>子元素的第一个<li>元素(项目#")在页面加载时自动打开，其他父级"保持关闭状态，直到单击其中任何一个.我通过将项目#"放在"abc"类下，并将其余的项目放在"xyz"类中来实现这一目标.

As you may see, the first <li> element with a <ul> child (item '#') opens automatically on page load, and the other "parents" stay closed until any one of them is clicked. I achieved this by putting item '#' under class 'abc' and the rest of the items under class 'xyz'.

接下来，我希望能够单击另一个父项，例如项目"AF"，它会自动关闭任何其他打开的父项，包括来自不同类("abc"而不是"xyz"的项目#" ').

Next, I would like to be able to click on another parent, say, item "A-F" and it automatically closes any other opened parent, including item '#' that's from a different class ('abc' instead of 'xyz').

在此网站上搜索切换"后，我想到了: jQuery动态切换

Searching "toggle" on this website led me to this: jQuery toggle dynamically

所以我尝试将代码添加到这样的代码中: http://jsbin.com/emaza4/3/，但似乎不起作用.

So I tried adding to my code like so: http://jsbin.com/emaza4/3/ but it doesn't seem to be working.

有人可以指出正确的方向来解决这个问题吗?提前致谢. :)

Could anybody point me in the right direction as to how to solve this problem? Thanks in advance. :)

推荐答案

您可以只使用 .toggle('slow') ( .hide('slow') )，位于被点击的在您的每个处理程序中，如下所示:

You can just use the hide-only version of .toggle('slow') (.hide('slow')), on the siblings of the clicked <li> in each of your handlers, like this:

$(this).siblings().children().hide('slow');

您可以在此处进行测试.

这篇关于jQuery:切换-列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！