jquery代表嵌套的ul元素展开/折叠功能

Question

我有一个嵌套的ul“树”，为了这个问题，只有几个级别顶部和几个孩子，但如果你可以假设从顶部ul（这里的目标是id="group"）可能有几个嵌套元素，但它们将始终遵循此结构。目前，我只有倒塌时他们的孩子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到测试用例。欢迎所有的意见，这是可以完成的最佳方式。

Answer 1

是这样你以后：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); 
    } 
});​ 

Answer 2

简单之一：

$('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。

Answer 3

虽然我更喜欢其他的解决方案，但我会提供一个替代路线为例。我制作了一个jQuery插件，可以创建一个clickOut伪事件，而在这个插件中我使用了缩小版本。这样做的好处是用户可以在菜单外点击并且菜单将会崩溃。 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(); 
    }); 
});​