Nano Hash - криптовалюты, майнинг, программирование

Конфликтующие аккордеоны.

У меня есть два отдельных аккордеона, которые используют аналогичные функции 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 &amp; 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 &nbsp;- $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 &amp; 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">

Вторая форма — это только частичный код, поэтому он может поместиться в посте. Спасибо.

jquery accordion
09.03.2015

  • Используйте другой идентификатор для идентификации элемента 09.03.2015

Ответы:


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();
        }
    });
09.03.2015
Новые материалы
Кластеризация: более глубокий взгляд
Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
Как написать эффективное резюме
Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
Частный метод Python: улучшение инкапсуляции и безопасности
Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
Как я автоматизирую тестирование с помощью Jest
Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..