Как настроить 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);
});

Новые блоги и статьи Все статьи Все блоги /
Настройки 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. Задача: реализовать контроль корректности заполнения дат назначения. . .	Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .
Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .	Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .	модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .