1
当另一个手风琴打开时，我必须关闭手风琴。我必须一次只显示一个手风琴。 目前，手风琴允许您一次打开多个面板。如果我打开一个选项卡，然后打开另一个选项卡，则两个选项卡将同时打开。我只能显示一个。你能帮我吗？当我们打开一个手风琴时，另一个手风琴应该关闭
$(function() {
$(".expand").on("click", function() {
$(this).next().slideToggle(200);
$expand = $(this).find(">:first-child");
if($expand.text() == "+") {
$expand.text("-");
} else {
$expand.text("+");
}
});
});#integration-list {
font-family: 'Open Sans', sans-serif;
width: 100%;
margin: 0 auto;
display: table;
}
#integration-list ul {
padding: 0;
margin: 20px 0;
color: #555;
}
#integration-list ul > li {
list-style: none;
/* border-top: 1px solid #ddd;*/
display: block;
padding: 15px;
overflow: hidden;
}
#integration-list ul > li > a:hover
{
text-decoration: none;
}
.expand {
display: block;
text-decoration: none;
color: #555;
cursor: pointer;
}
.expand h2{
font-size: 28px;
}
#sup{
display: table-cell;
vertical-align: middle;
width: 80%;
}
.detail {
margin: 0 34px;
display: none;
line-height: 22px;
/*height: 150px;*/
}
.detail h2{
font-size: 18px;
color: #000;
}
.right-arrow {
/* margin-top: 12px;*/
margin:0 20px;
width: 10px;
height: 100%;
float: left;
font-weight: bold;
font-size: 20px;
}
.icon {
height: 75px;
width: 75px;
float: left;
margin: 0 15px 0 0;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div id="integration-list">
<ul>
<li>
<a class="expand">
<div class="right-arrow">+</div>
<h2>Lorem ipsum dolor sit amet</h2>
</a>
<div class="detail">
<h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sagittis risus non tellus viverra suscipit. Integer eu vehicula orci, vel semper tortor. Cras ultrices semper vestibulum. Aliquam luctus euismod urna, vitae tincidunt lectus porta id. Nulla porttitor feugiat nisi posuere porta. Curabitur vitae nibh vitae nunc lobortis eleifend. Nullam feugiat urna vitae augue molestie finibus. Nulla facilisi.
</p>
</div>
</li>
<li>
<a class="expand">
<div class="right-arrow">+</div>
<h2>Lorem ipsum dolor sit amet</h2>
</a>
<div class="detail">
<h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sagittis risus non tellus viverra suscipit. Integer eu vehicula orci, vel semper tortor. Cras ultrices semper vestibulum. Aliquam luctus euismod urna, vitae tincidunt lectus porta id. Nulla porttitor feugiat nisi posuere porta. Curabitur vitae nibh vitae nunc lobortis eleifend. Nullam feugiat urna vitae augue molestie finibus. Nulla facilisi.
</p>
</div>
</li>
<li>
<a class="expand">
<div class="right-arrow">+</div>
<h2>Lorem ipsum dolor sit amet</h2>
</a>
<div class="detail">
<h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sagittis risus non tellus viverra suscipit. Integer eu vehicula orci, vel semper tortor. Cras ultrices semper vestibulum. Aliquam luctus euismod urna, vitae tincidunt lectus porta id. Nulla porttitor feugiat nisi posuere porta. Curabitur vitae nibh vitae nunc lobortis eleifend. Nullam feugiat urna vitae augue molestie finibus. Nulla facilisi.
</p>
</div>
</li>
</ul>
</div>
</div>
</div>
检查我的答案 –