Как сделать спойлер с использованием JavaScript, который будет скрывать или отображать содержимое с помощью стиля display:none?

Question

Любим

javascript

Как сделать спойлер с использованием JavaScript, который будет скрывать или отображать содержимое с помощью стиля display:none?

Добрый день. <br/> <br/> У меня есть следующий код для спойлера: <br/> <pre><code class="javascript">$('.categories').on('click', function(){
		$(this).toggleClass('opened').toggleClass('closed').next().slideToggle();
		if($(this).hasClass('opened')) {
			$(this).html('Меньше категорий');
		}
		else {
			$(this).html('Больше категорий');
		}
		$('.id-011, .id-012, .id-013, .id-014, .id-015, .id-016, .id-017, .id-018, .id-019, .id-020').slideToggle();
	});</code></pre> <br/> Проблема в том, что при раскрытии элементов к ним добавляется стиль <br/> <code class="javascript">overflow: hidden</code>, из-за чего дочерние элементы не отображаются при наведении курсора. <br/> <br/> Как мне изменить код так, чтобы вместо этого стиля применялся <code class="javascript">display: block/none</code> или чтобы просто добавлялся/удалялись новый класс к раскрываемым элементам? <br/> <br/> Спасибо.

20 октября 2024 г. 7:23

Ответы на вопрос 1

Похожие вопросы

Answer 1

Добрый день!

Если ваша цель — использовать стиль `display: none` для скрытия и отображения содержимого, а не `overflow: hidden`, вы можете изменить свой код, чтобы использовать `toggle()` вместо `slideToggle()`. Это позволит контролировать стиль `display` вручную.

Вот пример, как можно изменить ваш код:

```javascript
$('.categories').on('click', function() {
    $(this).toggleClass('opened closed');

    // Проверяем, добавлен ли класс 'opened' и меняем текст
    if ($(this).hasClass('opened')) {
        $(this).html('Меньше категорий');
    } else {
        $(this).html('Больше категорий');
    }

    // Скрываем или отображаем родственные элементы с помощью display
    const targets = $('.id-011, .id-012, .id-013, .id-014, .id-015, .id-016, .id-017, .id-018, .id-019, .id-020');

    if ($(this).hasClass('opened')) {
        targets.css('display', 'block'); // Отображаем элементы
    } else {
        targets.css('display', 'none'); // Скрываем элементы
    }
});
```

### Что изменилось:

1. Заменили `.slideToggle()` на `css('display', ...)` для прямого управления стилем.
2. Используется `if` для проверки, имеет ли элемент класс `opened`, чтобы управлять состоянием отображения.

Таким образом, вы сможете контролировать стиль `display`, избегая проблем с `overflow: hidden`. 

Если вам нужно, чтобы анимация сворачивания/разворачивания сохранялась, вы можете добавить простые CSS-анимации. Однако, если анимация не требуется, этот код будет работать эффективно с использованием стилей `display`.