jquery 手风琴菜单
如果说我想制作一个像这样的手风琴菜单：
<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();
if say I want to make an accordion menu such like this:
<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>
When user onclick the button selected content just show. how do I modify the below query code work?
I know ".next()" must be the key problem which make this cannot work, hope expert could help
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();
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
如果这符合您的需要，您应该查看 jQuery Accordion 和 其演示。
If this fits your need, you should look at jQuery Accordion and its demo.