在li中切換和設置ul的高度

Question

我有一個li內的列表，需要在單擊父li時滑入視圖。

我的代碼工作得很好，但如果我點擊任何立的所有子列表的展現在那裏，因爲我希望它僅適用於被點擊的一個...

$("#offering li").click(function() { 
     $("#offering li ul").animate({height: "toggle"}, 1000); 
    }); 


<ul id="offering"> 
    <li class="t current"><a href="#solutions"><span>sage solutions</span></a> 
        <ul> 
         <li><a href="#">50</a></li> 
         <li><a href="#">200</a></li> 
         <li><a href="#">CRM</a></li> 
        </ul> 
       </li> 
    <li class="m"><a href="#management"><span>solutions</span></a> 
        <ul> 
         <li><a href="#">50</a></li> 
         <li><a href="#">200</a></li> 
         <li><a href="#">CRM</a></li> 
        </ul> 
       </li> 
    <li class="b"><a href="#thirdparty"><span>third party additions</span></a></li> 
      </ul> 

Answer 1

$(this).find("ul").animate({height: "toggle"}, 1000);

Answer 2

這裏您正在將動畫應用於與選擇器#offering ul li相匹配的所有元素，但實際上您只需將其應用於單擊的li的子元素ul即可。

取而代之的是以下

$("#offering li").click(function() { 
     $("#offering li ul").animate({height: "toggle"}, 1000); 
    }); 

試試這個

$("#offering li").click(function() { 
     this.childNodes[0].animate({height:"toggle"},1000); 
    }); 

我不熟悉jQuery的，因爲我跟MooTools的，所以有可能是一個更合適的方式來獲得孩子ul元素比使用childNodes數組 - 但你明白了。