Question

jQuery: how do I make a collapsable tree nav?

这个解决方案正是我所需要的，并且能够很好地折叠我制作的无序列表，但是如果我想将相同的功能应用于嵌套的li呢？当我添加相同的

$('.sortable>li>ol>li').click(function() {
$(this).children("ol").stop(true, true).toggle("fast");
});

然后单击，它会执行它所需的操作，但节点会关闭..

我的HTML是

   <ul class='sortable'>
        <li>text1</li>
        <ul>
          <li>text2</li>
           <ul>
             <li>text3</li>
             <li>text3</li>
             <li>text3</li>
           </ul>
          <li>text2</li>
          <li>text2</li>
        </ul>
        <li>text1</li>
        <li>text1</li>
    </ul>

因此，当我点击1时，2向下滑动，但是如果我点击2，我想要3切换，但是2向上滑动。

$('.sortable>li').click(function() {
    $(this).children("ol").stop(true, true).toggle("fast");
});

这就是我的代码...我希望我已经解释过了，我也会做一个jFiddle。

http://jsfiddle.net/tara_irvine/uaDhr/4/

Answer 1

按照YonoRan的目的，您希望阻止事件从内部点击元素冒泡到外部点击元素。修改您的代码以使用event.stopPropagation我相信得到了理想的结果：

$('.sortable>li').click(function() {
    $(this).children("ol").stop(true, true).slideToggle("fast");
});

$('.sortable>li>ol>li').click(function(event) {
    event.stopPropagation();
    $(this).children("ol").stop(true, true).toggle("fast");
});

Answer 2

我认为你所说的叫做冒泡......不确定因为我真的不明白这个问题......

你应该尝试做的是替换它：

$('.sortable>li').click(function() {

和此：

$('.sortable>li>ol>li').click(function() {

用这个：

$('.sortable>li').live('click',function() {

和此：

 $('.sortable>li>ol>li').live('click',function() {

这应该会在您点击时停止冒泡。

关于可折叠树导航的问题

2 个答案: