我是编码新手。我需要创建一个手风琴，我用 html 创建并使用 jQuery 展开折叠面板。当我尝试打开第一个面板时，它会打开，当我尝试打开第二个面板时，第一个面板会关闭，这是我不希望发生的。我需要一个简单易用的 jQuery 方法来实现这一点。
if ($(this).next().is(':hidden') !== true) {
$(this).removeClass('active');
$(this).next().slideUp("fast");
//var height = $(this).clientHeight;
} else {
$('.panelHeading').removeClass('active');
$('.panelBody').slideUp('fast');
if ($(this).next().is(':hidden') === true) {
$(this).addClass('active');
$(this).next().slideDown('fast');
}
当另一个面板打开时，这会关闭一个面板。即使我打开另一个面板，我也希望打开的面板保持打开状态。
$(document).ready(function() {
$('.question').click(function() {
if ($(this).next().is(':hidden') !== true) {
$(this).removeClass('active');
$(this).next().slideUp("normal");
} else {
$('.question').removeClass('active');
$('.answer').slideUp('normal');
if ($(this).next().is(':hidden') === true) {
$(this).addClass('active');
$(this).next().slideDown('normal');
}
}
});
$('.answer').hide();
$('.expand').click(function(event) {
$('.question').next().slideDown('normal'); {
$('.question').addClass('active');
}
});
$('.collapse').click(function(event) {
$('.question').next().slideUp('normal'); {
$('.question').removeClass('active');
}
});
});#wrapper {
margin-left: auto;
margin-right: auto;
padding-top: 30px;
font-family: verdana;
font-size: 12px;
}
.question {
width: 400px;
float: left;
background: #fff;
padding-left: 20px;
padding-top: 18px;
cursor: pointer;
background-position: 4px -19px;
background-repeat: no-repeat;
}
.answer {
width: 400px;
float: left;
padding-top: 10px;
padding-bottom: 10px;
margin-left: 20px;
background: #fff;
}
.question::before {
content: '\25B6';
color: red;
}
.active:before {
content: '\25E2';
}
a {
color: #000;
text-decoration: none
}
a:hover {
text-decoration: underline
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<div id="wrapper">
<div style="float:right;"><a href="javascript:void(0)" class="expand">Expand All</a> | <a href="javascript:void(0)" class="collapse">Collapse All</a></div>
<div class="question"><span class="head">Lorem ipsum dolor sit amet?</span></div>
<div class="answer">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nec ligula lorem. Mauris laoreet sagittis sem, nec pulvinar neque tempus sit amet. Fusce at mi tortor, eget blandit velit. Phasellus sed dolor at felis auctor mollis nec eget nisl. Fusce
pretium nibh nisi. Aliquam congue iaculis velit, id facilisis elit pharetra a. Nulla posuere nunc vel tortor blandit sit amet tristique dolor venenatis. Phasellus nunc odio, feugiat non egestas ut, rutrum ac elit. Pellentesque iaculis tempor diam
quis ultricies. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed ullamcorper, enim non imperdiet dictum, nisl eros interdum turpis, sed posuere diam ante ac orci. Pellentesque et malesuada elit.
</div>
<div class="question"><span class="head">Vestibulum in ornare metus?</span></div>
<div class="answer">
Vestibulum in ornare metus. Integer in libero vitae eros bibendum ultricies. Cras ultricies risus eu massa tincidunt faucibus rutrum enim malesuada. Nullam non est a nunc tincidunt porttitor a ac odio. Cras accumsan ante in odio ultrices semper. Fusce
dignissim eleifend vehicula. Aenean dictum ante et lorem lacinia vel fringilla urna vestibulum. Duis condimentum felis in ligula venenatis et auctor massa dapibus. Morbi tincidunt elit a odio scelerisque sodales. Integer et egestas lorem. Suspendisse
tincidunt varius augue, ac fermentum erat ultricies laoreet. Donec eu dolor justo, a convallis lectus. Pellentesque pellentesque, erat ut dictum lacinia, orci nulla posuere tellus, at gravida nibh tellus dictum velit. Donec molestie sapien non dolor
tincidunt eget interdum tortor molestie. Curabitur placerat scelerisque odio, at congue purus malesuada et.
</div>
<div class="question"><span class="head">Donec sagittis massa tristique urna placerat?</span></div>
<div class="answer">
Donec sagittis massa tristique urna placerat at facilisis tortor accumsan. Etiam pulvinar scelerisque mi eu euismod. Donec tempor euismod condimentum. Vivamus consequat tempus est sit amet blandit. Sed malesuada libero in risus fermentum ornare et sed
risus. Duis ut odio nibh. Vivamus pulvinar porta dui, at adipiscing nunc rutrum ut. Nullam elementum pretium faucibus. Quisque faucibus viverra lacus eget consequat. Pellentesque ut tristique nulla. Duis lacus velit, gravida sit amet molestie vitae,
dignissim in lectus. Quisque rhoncus nibh a ligula dictum quis ultrices risus lobortis. Cras volutpat, tortor ac porta mattis, turpis nisl lobortis purus, sed aliquet purus lorem eu tellus. Nunc lacinia bibendum vehicula. Phasellus ut augue eget tortor
viverra molestie at nec ante. Cras venenatis, quam eget rutrum semper, turpis mauris scelerisque lacus, eget placerat urna ante eget diam. Suspendisse quis posuere est. Sed quis magna vitae tellus eleifend iaculis sit amet et ligula. Phasellus mollis
nunc id dolor malesuada placerat. Fusce posuere congue est eu euismod.
</div>
<div class="question"><span class="head">Nulla nec egestas quam?</span></div>
<div class="answer">
Nulla nec egestas quam. Sed gravida libero nec felis consequat elementum. Vivamus ante erat, malesuada sed dictum ac, mattis rhoncus nunc. Mauris libero eros, euismod vitae varius at, pellentesque ac nisl. Pellentesque lobortis, felis eget scelerisque
adipiscing, erat nisi vehicula orci, vel dictum velit orci non ipsum. Aliquam egestas erat sit amet tortor feugiat eu volutpat erat laoreet. Fusce lacinia, dui ac sodales cursus, est eros accumsan metus, sit amet ornare ligula diam eget nisl. Sed
nec lectus tellus. Phasellus malesuada volutpat luctus. Praesent fringilla feugiat sem quis feugiat. Morbi lorem ante, fermentum et egestas vel, pellentesque in eros. Aliquam ut ipsum ullamcorper nunc cursus consequat. Fusce sagittis convallis risus,
vel accumsan orci scelerisque ut. Curabitur nec sollicitudin nibh. Pellentesque vitae nunc ac nibh lobortis porttitor. Duis sit amet ante lectus, luctus vehicula nisl.
</div>
</div>