[英]How to make the accordion effect?
I'm trying to make the accordion
effect on this code, like this sample : 我正在尝试在此代码上制作
accordion
效果,例如以下示例 :
<div class="row">
<div class="col-sm-5 col-md-3 boxcontainer">
<span class="boxheader">
1
</span>
<div class="box">
ABC
</div>
<div class="boxfooter">
DEF
</div>
</div>
<div class="col-sm-5 col-md-3 boxcontainer">
<span class="boxheader">
2
</span>
<div class="box">
ABC
</div>
<div class="boxfooter">
DEF
</div>
</div>
</div>
When I click on the boxheader
, the box
and boxfooter
parts appear. 当我单击
boxheader
,将显示box
和boxfooter
部件。 How do I to deal this, please? 请问我该如何处理?
Use slideToggle() method of jquery. 使用jquery的slideToggle()方法。 Try the below code.
试试下面的代码。
$("body").on("click",".boxheader",function(){
$(".box").hide();
$(".boxfooter").hide();
$(this).parent().find(".box").slideToggle();
$(this).parent().find(".boxfooter").slideToggle();
});
css: CSS:
.box,.boxfooter{
display:none;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.