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。