jQuery的手風琴菜單

Question

如果說我想打一個摺疊式菜單，例如像這樣：

<div class="blueheaderbar" style="margin-top:20px; cursor:pointer;"> 

       <div class="floatleft">euuei slks</div> 
       <div class="floatright"><input class="showhidebtn" type="button" value="Show Outlet" style="margin:6px 16px 0 0; width:86px" /></div> 
       <div class="clear"></div> 
      </div> 
      <div class="accordionContent" style="padding-left:8px;"> 
       Content 1 
      </div> 

    <div class="blueheaderbar selected" style="margin-top:20px; cursor:pointer;"> 

       <div class="floatleft">title 2</div> 
       <div class="floatright"><input class="showhidebtn" type="button" value="Show Outlet" style="margin:6px 16px 0 0; width:86px" /></div> 
       <div class="clear"></div> 
      </div> 
      <div class="accordionContent" style="padding-left:8px;"> 
       Content 2 
      </div> 

當用戶的onclick按鈕選擇的內容只顯示。我如何修改下面的查詢代碼工作？

我知道 「的.next（）」 必須是問題的關鍵，這使得這可不行，希望專家能幫助

jQuery的（文件）。就緒（函數（）{

jQuery('.accordionButton').click(function() { 


    jQuery('.showhidebtn').attr('value', 'Show Outlet'); 


    jQuery('.accordionContent').slideUp('normal'); 


    if(jQuery(this).next().is(':hidden') == true) { 


     jQuery(this).attr('value', 'Hide Outlet'); 


     jQuery(this).next().slideDown('normal'); 
    } 

}); 

jQuery('.accordionContent').hide(); 

Answer 1

如果這適合你的需要，你應該看看jQuery Accordion和its demo。