当手风琴打开而另一个关闭时，该怎么办？

Question

我正在为我的一个项目制作手风琴。我的手风琴正在工作。现在，每次单击“手风琴”标题都会显示内容，并且所有“手风琴”都已打开。但是当我打开一个手风琴时，另一个手风琴将被关闭。

这是我的项目：https://siddiknmh.github.io/jquery-accordion

我的jquery代码是：

$('.acc_title').click(function(){

    var accdata = $(this).attr('acc-data');
    var selector = '.'+accdata;
    $(selector).slideToggle();

});

我希望这不需要更多的代码编写，但是我找不到这个想法。

Answer 1

您可以通过获取mFloatingView中的.parent().siblings()：

步骤1 。获得this中的.parent().siblings()并为每个对象进行迭代

第2步。检查内容div是否可见this

第3步。在该div上执行$(this).find('.acc_content').is( ":visible")。

这是正在运行的代码段：

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;
}