Выпадающее меню открыть/закрыть

Я использую меню навигации из Bootstrap5. Мой выпадающий список не открывается или не закрывается

я добавляю функцию jquery, и раскрывающийся список работает только для открытия, но не для закрытия сверху

$(".dropdown-toggle").click(function (event) {
    $('.dropdown-menu').addClass('show');
});
$(".dropdown-toggle").click(function (event) {
    $('.dropdown-menu.show').removeClass('show');
});

Оба ваших обработчика кликов срабатывают для каждого клика. Сделайте только один обработчик событий. Проверьте hasClass('show') на элементе, чтобы определить, что он должен делать. Или просто $('.dropdown-menu').toggleClass('show')

— 10.12.2020 00:08

jquery wordpress bootstrap-5

09.12.2020 23:42

Как конвертировать HTML в PDF с помощью jsPDF

В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.

157

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Просто измените addClass на toggleClass и удалите обнаружение второго клика:

$(".dropdown-toggle").click(function (event) {
    $('.dropdown-menu').toggleClass('show');
});

10.12.2020 00:10

Нет причин использовать jQuery в Bootstrap 5. Просто убедитесь, что вы используете соответствующие атрибуты data-bs- в раскрывающемся списке.

 <li class = "nav-item dropdown">
      <a class = "nav-link dropdown-toggle" href = "#" id = "navbarDropdown" role = "button" data-bs-toggle = "dropdown" aria-expanded = "false">
        Dropdown
      </a>
      <ul class = "dropdown-menu" aria-labelledby = "navbarDropdown">
        <li><a class = "dropdown-item" href = "#">Action</a></li>
        <li><a class = "dropdown-item" href = "#">Another action</a></li>
        <li><hr class = "dropdown-divider"></li>
        <li><a class = "dropdown-item" href = "#">Something else here</a></li>
      </ul>
 </li>

Демо

17.12.2020 14:47