Как сделать так, чтобы выпадашка сама не закрывалась?

Ссылка скопирована
1 ответ

Как сделать так, чтобы при нажатии на одну выпадашку, а затем на вторую, первая автоматически не закрывалась:
https://ska-forest.ru/cranab-cr280/ (страница с таким приколом).
То есть хотелось бы, чтобы обе оставались открытыми.

Дополнительно:

Ответы:

они обычно сами и не закрываются, вроде
отдельно надо прописывать, чтобы первая закрывалась)

Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь
Лучший ответ
1
Павел Админов Ответ

Для того чтобы выпадашка не закрывалась сама по себе, можно использовать JavaScript. Ниже приведен пример кода на JavaScript, который позволит выпадашке оставаться открытой:

document.addEventListener('DOMContentLoaded', function() {
  var dropdown = document.querySelector('.dropdown');
 
  dropdown.addEventListener('click', function(event) {
    event.stopPropagation();
    dropdown.classList.toggle('open');
  });
 
  document.addEventListener('click', function(event) {
    if (!dropdown.contains(event.target)) {
      dropdown.classList.remove('open');
    }
  });
});

document.addEventListener('DOMContentLoaded', function() { var dropdown = document.querySelector('.dropdown'); dropdown.addEventListener('click', function(event) { event.stopPropagation(); dropdown.classList.toggle('open'); }); document.addEventListener('click', function(event) { if (!dropdown.contains(event.target)) { dropdown.classList.remove('open'); } }); });

В этом коде мы добавляем обработчики событий на элемент выпадашки и на всем документе. При клике на выпадашку мы просто переключаем класс 'open', который отвечает за отображение выпадашки. При клике вне выпадашки, выпадашка закрывается.

Не забудьте добавить класс 'dropdown' к вашей выпадашке в HTML:

<div class="dropdown">
  <!-- Содержимое выпадашки -->
</div>

<div class="dropdown"> <!-- Содержимое выпадашки --> </div>

Таким образом, выпадашка будет оставаться открытой, пока пользователь не кликнет вне ее области. Надеюсь, это поможет вам решить вашу проблему.

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Вам также может быть интересно