我成功地制作了一个在您点击标题时打开和关闭的手风琴。我的问题是我无法弄清楚如何制作它，以便一次只能打开一个部分。因为现在它们只是保持打开然后运行页面。当一个人打开而另一个人被点击时，是否有可能这样做，新的一个打开而旧一个打开？
这里是jfiddle http://jsfiddle.net/oxjhva6a/
代码遵循以下模式：
$('#accordianhead1').toggle(
function () {
$('#accordianbody1').animate({
height: "110"
}, 500);
$('#open1').hide();
$('#close1').show();
},
function () {
$('#accordianbody1').animate({
height: "0"
}, 500);
$('#open1').show();
$('#close1').hide();
}
);
答案 0 :(得分：0)
目前代码非常重复。相反，我会通过课堂获得所有元素，在你的情况下，手风琴家＆＃39;然后隐藏所有不是要显示的元素的元素，然后显示当前元素。
使用$（＆＃39; .accordionbody＆＃39;）会返回一个元素数组，您可以根据需要进行操作。
由此，你可以点击所有手风琴，然后只显示点击的手风琴。
这可以这样做：
$(document).ready(function() {
$('.accordianhead').on('click', function(elem) {
console.log('running');
$('.accordianbody').hide()
$(elem.target).closest('.accordianhead').next().height('120px').show()
});
});
我为你更新了你的plunkr
答案 1 :(得分：0)
正如@Lou所说，通过选择所有.accordionhead一次可以简化代码。
我修复了你的代码并将动画保留为原始示例。
http://jsfiddle.net/h8bj91xc/1/
请参阅有关代码的评论。
$('.accordianhead').on('click',
function (e) {
// close all others animated
$('.accordianbody').not($(this).next()).animate({
height: "0"
}, 500);
// show all open and hide all close
$('.open').show();
$('.close').hide();
// open next element animated, i mean .accordianbody
$(this).next().animate({
height: "110"
}, 500);
// hidden children .open and show children .close
$(this).find('.open').hide();
$(this).find('.close').show();
}
);html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
outline:0px;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
#accordian
{
margin:20px auto 0 auto;
width:98%;
}
.accordianhead
{
cursor:pointer;
width:100%;
height:35px;
border-bottom:solid 1px #575757;
background: #1c1c1c; /* Old browsers */
background: -moz-linear-gradient(top, #1c1c1c 0%, #3a3a3a 48%, #1c1c1c 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1c1c1c), color-stop(48%,#3a3a3a), color-stop(100%,#1c1c1c)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #1c1c1c 0%,#3a3a3a 48%,#1c1c1c 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #1c1c1c 0%,#3a3a3a 48%,#1c1c1c 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #1c1c1c 0%,#3a3a3a 48%,#1c1c1c 100%); /* IE10+ */
background: linear-gradient(to bottom, #1c1c1c 0%,#3a3a3a 48%,#1c1c1c 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1c1c1c', endColorstr='#1c1c1c',GradientType=0 ); /* IE6-9 */
}
.accordianhead h2
{
color:White;
font-size:16px;
font-family:Century gothic;
padding:9px;
float:left;
}
.accordianhead h2:hover
{
color:#FF8000;
}
.accordianbody
{
width:100%;
height:0px;
overflow:hidden;
background: #ffffff; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlNWU1ZTUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* IE10+ */
background: linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-8 */
}
.accordianbody p
{
font-size:14px;
font-family:Arial;
color:#303030;
padding:5px;
text-align:left;
line-height:1.3em;
}
.open
{
float:right;
color:White;
padding:9px;
}
.close
{
float:right;
color:White;
padding:9px;
display:none;
}
.accordianbody h3
{
text-align:left;
font-family:Arial;
color:#212121;
font-size:16px;
padding:3px;
margin-left:5px;
}
.accordianbody h4
{
text-align:left;
font-family:Arial;
color:#303030;
font-size:14px;
padding:3px;
margin-left:5px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="accordian">
<div class="accordianhead" id="accordianhead1"><h2>Customer Service/Pricing</h2><h6 class="open" id="open1">Open +</h6><h6 class="close" id="close1">Close -</h6></div>
<div class="accordianbody" id="accordianbody1"><h3>McFarland Door & Millwork, LLC</h3><h4>July 2014 – November 2014 | Lakeview,OR</h4><p>Received, priced, and delivered all quotes with a 24 hour turn around time goal. Trained others in the quoting department and consulted with the owners on hiring. Customer service: answered technical questions, problem solving, and building relationships with customers to increase sales.</p></div>
<div class="accordianhead" id="accordianhead2"><h2>Web Designer/Developer</h2><h6 class="open" id="open2">Open +</h6><h6 class="close" id="close2">Close -</h6></div>
<div class="accordianbody" id="accordianbody2"><h3>McFarland Door Mfg. Co., Inc.</h3><h4>January 2013 – April 2013 | Lakeview, OR</h4><p>Designed and developed new website from the ground up and managed social networking.</p></div>
<div class="accordianhead" id="accordianhead3"><h2>Administrative Assistant</h2><h6 class="open" id="open3">Open +</h6><h6 class="close" id="close3">Close -</h6></div>
<div class="accordianbody" id="accordianbody3"><h3>McFarland Door Mfg. Co., Inc.</h3><h4>June 2011 – September 2012 | Lakeview, OR</h4><p>Answered phones, typed quotes, did all shipping paperwork for daily shipments, entered bills, basic accounting, calculated sales commissions, worked with Microsoft word, and Excel, re-designed company invoices, was the go-to person for anything that needed to be done.</p></div>
<div class="accordianhead" id="accordianhead4"><h2>Small Business Owner</h2><h6 class="open" id="open4">Open +</h6><h6 class="close" id="close4">Close -</h6></div>
<div class="accordianbody" id="accordianbody4"><h3>Savannah Poultry</h3><h4>May 2009 – March 2012 | Lakeview, OR</h4><p>Built the business up from the very beginnings of the idea stage all the way to being a thriving company. Totally created and built website and company brand. Did all marketing and customer service. Raised all stock carefully managing genetics, breeding, etc. Initiated all hatching procedures and development of new breeds. Packaged and shipped products all across the United States.</p></div>
<div class="accordianhead" id="accordianhead5"><h2>Veterinary Technician</h2><h6 class="open" id="open5">Open +</h6><h6 class="close" id="close5">Close -</h6></div>
<div class="accordianbody" id="accordianbody5"><h3>Lakeview Animal Hospital</h3><h4>September 2009 – August 2010 | Lakeview, OR</h4><p>Assisted Doctors during exams, surgeries, procedures etc. Office work: filing, answering phones, etc. Stocked and checked in inventory. Took care of animals that were boarding including walking, feeding, and giving medications. Went on house calls with doctors to assist in handling of patients. Other various tasks that are common in the Veterinary field.</p></div>
</div>