使用 mootools 切换多级 ul
问候, 我想用 mootools 1.1 或纯 javascript 切换一个巨大的多级 ul。 该列表如下所示: HTML:
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
<li>
<ul>
<li>ddd
<ul>
<li>fff</li>
<li>ggg</li>
</ul>
</li>
<li>eee</li>
</ul>
</li>
</ul>
我最初想做的是显示第一个级别展开,其他级别折叠,并且当单击每个列表项时,展开其下面的 ul。
是否可以在不(大幅)修改上面的 html 的情况下做到这一点? 从文档中,我发现 Fx.Slide 是最合适的,但是它接受元素的 id 作为参数,这意味着我必须为每个列表项分配 id。 有没有办法使用从顶部开始的元素集合选择器?
Greetings,
I would like to toggle a huge multi-level ul with mootools 1.1 or plain javascript.
The list looks like:
HTML:
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
<li>
<ul>
<li>ddd
<ul>
<li>fff</li>
<li>ggg</li>
</ul>
</li>
<li>eee</li>
</ul>
</li>
</ul>
What I would like to do initially is to show the first level expanded, and the other levels collapsed and when each of the list items is clicked, to expand the ul below it.
Is it possible to do it without (greatly) modifying the html above?
From the documentation, I see that Fx.Slide is the most appropriate, however it accepts the id of the element as a parameter, which means I have to assign id's to each list item.
Is there a way by using selectors of collections of elements starting from the top?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
我不知道为什么我会说适用于非常旧的 1.1 版本。但是,至少从 1.2 开始,您需要传递的元素要么是 ID(如您所说),要么是实际元素。
如果您可以使用 1.1 以外的其他版本,请尝试 1.3,它可以更轻松地选择您想要的元素。
在这里,我相信您需要每个具有直接
作为父元素的
元素。 MooTools 1.3 采用了这个新的选择器引擎 Slick,这将相当容易地完成它:
ul !>李
。但是,我不确定(我没有成功)直接子选择器是否可以在 1.1 中正常工作。
这是我想到的: http://jsfiddle.net/rCfwq/
I'm not sure whay I'll say apply with the very old 1.1 version. However, at least since 1.2, the element you need to pass is either the ID (like you said), either the actual element.
If you can use another version than 1.1, try the 1.3 which makes it easier to select the elements you want.
Here, I believe you need every
<ul>
element which has a direct<li>
as parent. MooTools 1.3 features this new selector engine Slick, which would accomplish it fairly easilly:ul !> li
.However, I'm not sure (I didn't success) that the direct child selectors works properly with 1.1.
Here is what I came up with: http://jsfiddle.net/rCfwq/