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>

当用户点击按钮时，选择的内容只显示。如何修改以下查询代码？

我知道“.next（）”必须是使这个不行的关键问题，希望专家可以提供帮助

jQuery（document）.ready（function（）{

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。

jquery手风琴菜单

1 个答案: