Как настроить slideToggle?

@LordPrimes · Регистрация: 29.12.2017

Студворк — интернет-сервис помощи студентам

Добрый день,есть такая структура элемента,и нужно сделать так чтобы при нажатие на опеределенный тайтл товар с классом товар показывало или прятало все его описания

HTML5
1
2
3
4
5
6
7
8
9
<li><strong class="title-tovar">Тип памяти:</strong></li>
            <li><a  class="category-tovar"  >GDDR5</a></li>
            <li><a  class="category-tovar"  >GDDR5X</a></li>
            <li><strong class="title-tovar">Разрядность шины памяти:</strong></li>
            <li><a  class="category-tovar"  >64bit</a></li>
            <li><a  class="category-tovar"  >128bit</a></li>
            <li><a  class="category-tovar"  >192bit</a></li>
            <li><a  class="category-tovar"  >256bit</a></li>
            <li><a  class="category-tovar"  >352bit</a></li>

JavaScript
1
2
3
4
5
6
7
8
$('.title-tovar').click(function(){
    let arc = $(this).toggleClass('active');
    if (arc = 'active'){
       $('.category-tovar').slideToggle(200);
    }
   
    
});

Сделал покамись такое,но не могу додуматься как допилить код в js

@msheal · 02.04.2018, 13:57

Сообщение от LordPrimes

if (arc = 'active'){

Ваше условие будет всегда возвращать true потому-что вы в нем выполняете присвоение вместо сравнения. В добавок строка $(this).toggleClass('active') возвращает целевой элемент целиком, а не строку, которую вы проверяете.

Для более-менее стабильной работы прийдется изменить html например так:
https://codepen.io/anon/pen/EERjxz?editors=1010

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<ul>
  <li>
    <strong class="title-tovar">Тип памяти:</strong>
    <ul>
      <li><a  class="category-tovar"  >GDDR5</a></li>
      <li><a  class="category-tovar"  >GDDR5X</a></li>
    </ul>
  </li>
  
  <li>
    <strong class="title-tovar">Разрядность шины памяти:</strong>
    <ul>
      <li><a  class="category-tovar"  >64bit</a></li>
      <li><a  class="category-tovar"  >128bit</a></li>
      <li><a  class="category-tovar"  >192bit</a></li>
      <li><a  class="category-tovar"  >256bit</a></li>
      <li><a  class="category-tovar"  >352bit</a></li>
    </ul>
  </li>
</ul>

JavaScript
1
2
3
4
5
6
$('.title-tovar').click(function(){
    $(this).toggleClass('active');
    if ($(this).hasClass('active')){
       $(this).siblings('ul').slideToggle(200);
    }
});

Второй адекватный вариант - использовать атрибуты, типа такого:

HTML5
1
2
3
4
5
6
7
8
9
<li><strong class="title-tovar" data-target="category1">Тип памяти:</strong></li>
            <li data-category="category1"><a  class="category-tovar"  >GDDR5</a></li>
            <li data-category="category1"><a  class="category-tovar"  >GDDR5X</a></li>
            <li><strong class="title-tovar"  data-target="category2">Разрядность шины памяти:</strong></li>
            <li data-category="category2"><a  class="category-tovar"  >64bit</a></li>
            <li data-category="category2"><a  class="category-tovar"  >128bit</a></li>
            <li data-category="category2"><a  class="category-tovar"  >192bit</a></li>
            <li data-category="category2"><a  class="category-tovar"  >256bit</a></li>
            <li data-category="category2"><a  class="category-tovar"  >352bit</a></li>

JavaScript
1
2
3
4
$('.title-tovar').click(function(){
  const target = $(this).data('target');
  $(`[data-category=${target}]`).slideToggle(200);
});

Новые блоги и статьи Все статьи Все блоги /
Модель заражения группы наркоманов alhaos 17.04.2026 Условия задачи сформулированы тут Суть: - Группа наркоманов из 10 человек. - Только один инфицирован ВИЧ. - Колются одной иглой. - Колются раз в день. - Колются последовательно через. . .	Мысли в слух. Про "навсегда". kumehtar 16.04.2026 Подумалось тут, что наверное очень глупо использовать во всяких своих установках понятие "навсегда". Это очень сильное понятие, и я только начинаю понимать край его смысла, не смотря на то что давно. . .	My Business CRM MaGz GoLd 16.04.2026 Всем привет, недавно возникла потребность создать CRM, для личных нужд. Собственно программа предоставляет из себя базу данных клиентов, в которой можно фиксировать звонки, стадии сделки, а также. . .	Знаешь почему 90% людей редко бывают счастливыми? kumehtar 14.04.2026 Потому что они ждут. Ждут выходных, ждут отпуска, ждут удачного момента. . . а удачный момент так и не приходит.
Фиксация колонок в отчете СКД Maks 14.04.2026 Фиксация колонок в СКД отчета типа Таблица. Задача: зафиксировать три левых колонки в отчете. Процедура ПриКомпоновкеРезультата(ДокументРезультат, ДанныеРасшифровки, СтандартнаяОбработка) / / . . .	Настройки VS Code Loafer 13.04.2026 { "cmake. configureOnOpen": false, "diffEditor. ignoreTrimWhitespace": true, "editor. guides. bracketPairs": "active", "extensions. ignoreRecommendations": true, . . .	Оптимизация кода на разграничение прав доступа к элементам формы Maks 13.04.2026 Алгоритм из решения ниже реализован на нетиповом документе, разработанного в конфигурации КА2. Задачи, как таковой, поставлено не было, проделанное ниже исключительно моя инициатива. Было так:. . .	Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .

Опции темы