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(); 
    }); 
});​