当一个 Accordion 打开而另一个关闭时，我该怎么做？

Question

我正在尝试为我的一个项目制作手风琴。我的手风琴正在工作。现在，每次单击 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();

});

我希望这不需要编写更多代码，但我找不到思路。

Answer 1

你可以通过获取 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>

当一个 Accordion 打开而另一个关闭时，我该怎么做？

How can I do this when an Accordion open and the other shuts off?

javascript

jquery

jquery-ui

accordion

jquery-plugins