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

Question

我正在尝试为我的一个项目制作 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();

});

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

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>