我有两个使用类似jquery函数的独立手风琴。其中一个嵌套的手风琴需要在点击时展开和折叠，另一个只有一个手风琴需要在点击时展开和折叠。我的jquery代码似乎彼此冲突，是否有更有效的方法来编写它？
$('.accordion-title').click(function () {
if ($(this).hasClass('active')) {
$(this).removeClass('active').next('.accordion-content').slideUp();
} else {
$('.accordion-title').removeClass('active');
$('.accordion-content').slideUp();
$(this).addClass('active').next('.accordion-content').slideDown();
}
});<section class="ac-container">
<h2>Breakfast</h2>
<dl class="accordion-title"><div><img src="img/breakfast/american.jpg" alt=""><span>American</span></div></dl>
<div class="accordion-content"><p>Well, the way they make shows is, they make one show. That show's called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they're going to make more shows.</p></div>
<dl class="accordion-title"><div><img src="img/breakfast/continental.jpg" alt=""><span>Continental</span></div></dl>
<div class="accordion-content"><p>Well, the way they make shows is, they make one show. That show's called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they're going to make more shows.</p></div>
<dl class="accordion-title"><div><img src="img/breakfast/english.jpg" alt=""><span>English</span></div></dl>
<div class="accordion-content"><p>Well, the way they make shows is, they make one show. That show's called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they're going to make more shows.</p></div>
<dl class="accordion-title"><div><img src="img/breakfast/health.jpg" alt=""><span>The Healthy Stuff</span></div></dl>
<div class="accordion-content"><p>Well, the way they make shows is, they make one show. That show's called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they're going to make more shows.</p></div>
<dl class="accordion-title"><div><img src="img/breakfast/misc.jpg" alt=""><span>Miscellaneous</span></div></dl>
<div class="accordion-content"><p>Well, the way they make shows is, they make one show. That show's called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they're going to make more shows.</p></div>
</section>
$(function () {
$('.accordion-title').click(function () {
if ($(this).hasClass('active')) {
$(this).removeClass('active').next('.accordion-content').slideUp();
} else {
$(this).siblings('.accordion-title').removeClass('active');
var $ct = $(this).siblings('.accordion-content').slideUp();
$ct.find('.accordion-title.active').removeClass('active');
$ct.find('.accordion-content').slideUp();
$(this).addClass('active').next('.accordion-content').slideDown();
}
});
});<form name="cform" onsubmit="return validateForm()" action="/regcamp.php" method="post" style="margin-top:5%;">
<dl class="accordion-title"><div><span>Camper 1 Information</span></div></dl>
<div class="accordion-content"><p>
<div class="formrow">
<div class="formitem col1of2">
<label class="label req" for="firstname">Name</label>
<input type="text" name="firstname" id="firstname" placeholder="Name" required="required" x-autocompletetype="given-name"/>
</div>
</div>
<div class="formrow">
<div class="formitem">
<div class="label req">Gender</div>
<div class="ticks">
<label>
<input type="radio" name="gender1" value="Male" required="required"/>
<span>Male</span>
</label>
<label>
<input type="radio" name="gender1" value="Female" required="required"/>
<span>Female</span>
</label>
</div>
</div>
</div>
<div class="formrow">
<div class="formitem col1of2">
<label class="label req" for="grade1">Grade in School</label>
<input type="text" name="grade1" id="grade1" placeholder="Grade in School" required="required" x-autocompletetype="given-name"/>
</div>
</div>
<div class="formrow">
<div class="formitem col1of2">
<label class="label" for="bmoth1">Date of Birth</label>
<select name="bmonth1" id="bmoth1" x-autocompletetype="birth-month">
<option selected="selected">Month</option>
<option value="January">January</option>
<option value="Febuary">Febuary</option>
<option value="March">March</option>
<option value="April">April</option>
<option value="May">May</option>
<option value="June">June</option>
<option value="July">July</option>
<option value="August">August</option>
<option value="September">September</option>
<option value="October">October</option>
<option value="November">November</option>
<option value="December">December</option>
</select>
<select name="bday1" id="bday1" x-autocompletetype="birth-day">
<option selected="selected">Day</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select name="year1" id="year1" x-autocompletetype="birth-year">
<option selected="selected">Year</option>
<option value="1995">1995</option>
<option value="1996">1996</option>
<option value="1997">1997</option>
<option value="1998">1998</option>
<option value="1999">1999</option>
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
<option value="2005">2005</option>
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
</select>
</div>
</div>
<div class="formrow">
<div class="formitem col1of2">
<label class="label" for="cshora">Enroll in Camp Shoreline</label>
<select id="cshora" name="cshora" x-autocompletetype="enroll">
<option selected="selected" value="No">Select</option>
<option value="Week">Camp Shoreline - $375</option>
</select>
<select id="weekcsa" name="weekcsa" x-autocompletetype="week">
<option selected="selected">Select Date</option>
<option value="No">Select Date</option>
<option value="1 - June 8-12">June 8-12</option>
<option value="2 - June 15-19">June 15-19</option>
<option value="3 - June 22-26">June 22-26</option>
<option value="4 - June 29-July 3">June 29-July 3</option>
<option value="5 - July 6-10">July 6-10</option>
<option value="6 - July 13-17">July 13-17</option>
<option value="7 - July 20-24">July 20-24</option>
<option value="8 - July 27-31">July 27-31</option>
<option value="9 - August 3-7">August 3-7</option>
<option value="10 - August 10-14">August 10-14</option>
<option value="11 - August 17-21">August 17-21</option>
</select>
</div>
</div>
<div class="formrow">
<div class="formitem col1of2">
<label class="label" for="level1a">Windsurfing & Sailing Level I</label>
<select id="level1a" name="level1a" x-autocompletetype="level1a">
<option selected="selected" value="No">Select</option>
<option value="Week">WS/Sail Level I - $415</option>
</select>
<select id="week1a" name="week1a" x-autocompletetype="week">
<option value="No">Select Date</option>
<option value="1 - June 8-12">June 8-12</option>
<option value="2 - June 15-19">June 15-19</option>
<option value="3 - June 22-26">June 22-26</option>
<option value="4 - June 29-July 3">June 29-July 3</option>
<option value="5 - July 6-10">July 6-10</option>
<option value="6 - July 13-17">July 13-17</option>
<option value="7 - July 20-24">July 20-24</option>
<option value="8 - July 27-31">July 27-31</option>
<option value="9 - August 3-7">August 3-7</option>
<option value="10 - August 10-14">August 10-14</option>
<option value="11 - August 17-21">August 17-21</option>
</select>
</div>
</div>
<div class="formrow">
<div class="formitem col1of2">
<label class="label" for="level2a">Windsurfing & Sailing Level II</label>
<select id="level2a" name="level2a" x-autocompletetype="level2a">
<option selected="selected" value="No">Select</option>
<option value="Week">WS/Sail Level II - $430</option>
</select>
<select id="week2a" name="week2a" x-autocompletetype="week">
<option value="No">Select Date</option>
<option value="1 - June 8-12">June 8-12</option>
<option value="2 - June 15-19">June 15-19</option>
<option value="3 - June 22-26">June 22-26</option>
<option value="4 - June 29-July 3">June 29-July 3</option>
<option value="5 - July 6-10">July 6-10</option>
<option value="6 - July 13-17">July 13-17</option>
<option value="7 - July 20-24">July 20-24</option>
<option value="8 - July 27-31">July 27-31</option>
<option value="9 - August 3-7">August 3-7</option>
<option value="10 - August 10-14">August 10-14</option>
<option value="11 - August 17-21">August 17-21</option>
</select>
</div>
</div>
<div class="formrow">
<div class="formitem col1of2">
<label class="label" for="options1">Options</label>
<select id="options1" name="options1" x-autocompletetype="options">
<option selected="selected" value="No">Select</option>
<option value="Weekly Extended Care">Weekly Extended Care - $150</option>
<option value="Weekly Lunch Pass">Weekly Lunch Pass - $40</option>
<option value="Week Lunch + Extended Care">Weekly Extended Care + Lunch Pass - $190</option>
</select>
</div>
</div>
</p>
<dl class="accordion-title"><div><span>Camper 2 Information</span></div></dl>
<div class="accordion-content"><p>
<div class="formrow">
<div class="formitem col1of2">
第二种形式只是部分代码，因此可以放在帖子中。感谢。
答案 0 :(得分：1)
您需要通过仅遍历每个手风琴标题的直接父节点来隔离您可以执行的实例。
我不打算重写这两套，但会使用第一个
给你基本的方法$('.accordion-title').click(function () {
var $parent = $(this).parent();// returns <section class="ac-container">
if ($(this).hasClass('active')) {
$(this).removeClass('active').next('.accordion-content').slideUp();
} else {
// only look within instance of <section class="ac-container">
$parent.find('.accordion-title').removeClass('active');
$parent.find('.accordion-content').slideUp();
$(this).addClass('active').next('.accordion-content').slideDown();
}
});