[英]collapse and expand tabs jquery / simple accordion
我有关于手风琴标签的查询..
我已经使用了手风琴菜单插件以下代码已用于页面中的选项卡。
[accordions]
[accordion title ="about"]**Content 1** [/accordion ]
[accordion title="Home"]**Content 2** [/accordion ]
[/accordions]
该网页如下所示:
我首先要折叠这两个选项卡,当单击ABOUT时应展开并显示内容。单击Home后应折叠ABOUT选项卡并展开主页
通过jQuery,我可以实现这一目标,但是我不知道该下载哪个脚本并使用它。
有任何想法吗?? 提前致谢
如果您使用jQuery UI Accordion,则可以将简单事件添加到您的手风琴中。
或添加事件:
$( ".selector" ).bind( "accordioncreate", function(event, ui) {
$( ".selector" ).accordion( "option", "active", -1 )
});
对于简单的手风琴,我有两种不同的方法。 第一个带有关闭按钮,第二个带有悬停触发器。
jQuery的:
$('.content').slideUp(400);//reset panels
$('.panel').click(function() {//open
var takeID = $(this).attr('id');//takes id from clicked ele
$('#'+takeID+'C').slideDown(400);
//show's clicked ele's id macthed div = 1second
});
$('span').click(function() {//close
var takeID = $(this).attr('id').replace('Close','');
//strip close from id = 1second
$('#'+takeID+'C').slideUp(400);//hide clicked close button's panel
});
的HTML:
<div class="panel" id="panel1">panel1</div>
<div id="panel1C">content1
<span id="panel1Close">X</span>
</div>
<div class="panel" id="panel2">panel2</div>
<div id="panel2C">content2
<span id="panel2Close">X</span>
</div>
<div class="panel" id="panel3">panel3</div>
<div id="panel3C">content3
<span id="panel3Close">X</span>
</div>
2)在此是与悬停触发的jsfiddle例如:
$('.panel').hover(function() {
var takeID = $(this).attr('id');//takes id from clicked ele
$('.content').stop(false,true).slideUp(400);//close
//used stop for prevent conflict
$('#'+takeID+'C').stop(false,true).slideDown(400);//open
//show's clicked ele's id macthed div
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.