我正在尝试为我的一个项目制作 Accordion 。我的 Accordion 正在工作。现在,每次单击 Accordion 标题都会显示内容,并且所有 Accordion 都已打开。但是当我打开一个 Accordion 时,另一个 Accordion 将被关闭。
这是我的项目:https://siddiknmh.github.io/jquery-accordion
我的 jquery 代码是:
$('.acc_title').click(function(){
var accdata = $(this).attr('acc-data');
var selector = '.'+accdata;
$(selector).slideToggle();
});
我希望这不需要编写更多代码,但我找不到想法。
最佳答案
您可以通过获取 this
的 .parent().siblings()
来做到这一点:
第 1 步。获取 this
的 .parent().siblings()
并为每个迭代
第 2 步。检查内容 div 是否可见 $(this).find('.acc_content').is( ":visible")
第 3 步。在那个 div 上执行 slideToggle()
。
这是正在运行的片段:
$(document).ready(function(){
$('.acc_title').click(function(){
var accdata = $(this).attr('acc-data');
var selector = '.'+accdata;
$(selector).slideToggle();
$(this).parent().siblings().each(function() {
if($(this).find('.acc_content').is( ":visible")){
$(this).find('.acc_content').slideToggle();
}
});
});
});
*{
margin:0;
padding:0;
}
.acc_warap{
width:600px;
margin:0 auto;
}
.single_acc{
margin-bottom:20px;
background:#F0F4F8;
border-radius: 5px;
}
.acc_title{
background:#BCBCBC;
padding:10px 20px;
border-radius: 5px 5px 0 0;
}
.acc_content{
padding:20px;
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="acc_warap">
<div class="single_acc">
<div class="acc_title" acc-data="no1">
<h4>This is accordion title</h4>
</div>
<div class="acc_content no1">
<p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.</p>
</div>
</div><!-- End single accordion-->
<div class="single_acc">
<div class="acc_title" acc-data="no2">
<h4>This is accordion title</h4>
</div>
<div class="acc_content no2">
<p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.</p>
</div>
</div><!-- End single accordion-->
<div class="single_acc">
<div class="acc_title" acc-data="no3">
<h4>This is accordion title</h4>
</div>
<div class="acc_content no3">
<p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.</p>
</div>
</div><!-- End single accordion-->
<div class="single_acc">
<div class="acc_title" acc-data="no4">
<h4>This is accordion title</h4>
</div>
<div class="acc_content no4">
<p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.</p>
</div>
</div><!-- End single accordion-->
</div>
关于javascript - 当一个 Accordion 打开而另一个关闭时,我该怎么做?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51224787/