Как я могу программно закрыть раскрывающийся список при нажатии кнопки?

У меня есть раскрывающееся меню Bootstrap 5, состоящее из флажков с метками data-bs-auto-close = "outside", так что меню закрывается при внешнем щелчке.

<div class = "dropdown">
  <button type = "button" class = "btn btn-success dropdown-toggle" data-bs-toggle = "dropdown" data-bs-auto-close = "outside" aria-expanded = "false">
    Dropdown button
  </button>
  <div class = "dropdown-menu">
    <div class = "px-1">
      <input class = "form-check-input" type = "checkbox" id = "option1" name = "filter">
      <label for = "option1">Option 1</label>
    </div>

    <div class = "px-1">
      <input class = "form-check-input" type = "checkbox" id = "option2" name = "filter">
      <label for = "option2">Option 2</label>
    </div>

    <div class = "btn-group px-1 mt-2 w-100">
      <button onclick = "closeFilter()" type = "button" class = "apply btn btn-sm btn-success">Apply</button>
      <button onclick = "closeFilter()" type = "button" class = "reset btn btn-sm btn-success">Reset</button>
    </div>
  </div>
</div>

Я хочу, чтобы меню закрывалось при нажатии любой из кнопок «Применить» и «Сброс». Для этой цели у меня есть функция ниже:

function closeFilter() {
  let dropDown = event.target.closest('.dropdown');
  let dropDownButton = dropDown.querySelector('.dropdown-toggle');
  dropDownButton.style.border = '1px solid red';
  dropDownButton.dropdown('toggle');
}

<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet" />

<div class = "dropdown">
  <button type = "button" class = "btn btn-success dropdown-toggle" data-bs-toggle = "dropdown" data-bs-auto-close = "outside" aria-expanded = "false">
    Dropdown button
  </button>
  <div class = "dropdown-menu">
    <div class = "px-1">
      <input class = "form-check-input" type = "checkbox" id = "option1" name = "filter">
      <label for = "option1">Option 1</label>
    </div>

    <div class = "px-1">
      <input class = "form-check-input" type = "checkbox" id = "option2" name = "filter">
      <label for = "option2">Option 2</label>
    </div>

    <div class = "btn-group px-1 mt-2 w-100">
      <button onclick = "closeFilter()" type = "button" class = "apply btn btn-sm btn-success">Apply</button>
      <button onclick = "closeFilter()" type = "button" class = "reset btn btn-sm btn-success">Reset</button>
    </div>
  </div>
</div>

Однако приведенная выше функция выдает ошибку:

dropDownButton.dropdown is not a function

Где моя ошибка?

javascript bootstrap-5

26.08.2024 15:05

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

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

Ответы 2

Для этого вам нужно будет явно определить элемент dropDownButton как раскрывающийся список Bootstrap.

и после этого вы сможете использовать для этого метод toggle

  const dropdown = new bootstrap.Dropdown(dropDownButton);
  dropdown.toggle();

function closeFilter() {
  let dropDown = event.target.closest('.dropdown');
  let dropDownButton = dropDown.querySelector('.dropdown-toggle');
  dropDownButton.style.border = '1px solid red';
  const dropdown = new bootstrap.Dropdown(dropDownButton);
  dropdown.toggle();
}

<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet" />

<div class = "dropdown">
  <button type = "button" class = "btn btn-success dropdown-toggle" data-bs-toggle = "dropdown" data-bs-auto-close = "outside" aria-expanded = "false">
    Dropdown button
  </button>
  <div class = "dropdown-menu">
    <div class = "px-1">
      <input class = "form-check-input" type = "checkbox" id = "option1" name = "filter">
      <label for = "option1">Option 1</label>
    </div>

    <div class = "px-1">
      <input class = "form-check-input" type = "checkbox" id = "option2" name = "filter">
      <label for = "option2">Option 2</label>
    </div>

    <div class = "btn-group px-1 mt-2 w-100">
      <button onclick = "closeFilter()" type = "button" class = "apply btn btn-sm btn-success">Apply</button>
      <button onclick = "closeFilter()" type = "button" class = "reset btn btn-sm btn-success">Reset</button>
    </div>
  </div>
</div>

26.08.2024 15:14

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

Вам нужно получить экземпляр конкретного раскрывающегося списка. Для этого вы можете использовать bootstrap.Dropdown.getInstance(element).

function closeFilter() {
  let dropDown = event.target.closest('.dropdown');
  let dropDownButton = dropDown.querySelector('.dropdown-toggle');
  dropDownButton.style.border = '1px solid red';

  bootstrap.Dropdown.getInstance(dropDownButton).toggle();
}

<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet" />

<div class = "dropdown">
  <button type = "button" class = "btn btn-success dropdown-toggle" data-bs-toggle = "dropdown" data-bs-auto-close = "outside" aria-expanded = "false">
    Dropdown button
  </button>
  <div class = "dropdown-menu">
    <div class = "px-1">
      <input class = "form-check-input" type = "checkbox" id = "option1" name = "filter">
      <label for = "option1">Option 1</label>
    </div>

    <div class = "px-1">
      <input class = "form-check-input" type = "checkbox" id = "option2" name = "filter">
      <label for = "option2">Option 2</label>
    </div>

    <div class = "btn-group px-1 mt-2 w-100">
      <button onclick = "closeFilter()" type = "button" class = "apply btn btn-sm btn-success">Apply</button>
      <button onclick = "closeFilter()" type = "button" class = "reset btn btn-sm btn-success">Reset</button>
    </div>
  </div>
</div>

26.08.2024 15:28

Другие вопросы по теме

HTML-контент всплывающего окна Bootstrap 5

Как я могу переключать содержимое вкладок в Bootstrap 5?

Установите пользовательские сообщения Bootstrap о недействительных/действительных сообщениях

Централизованное объединение двух изображений с помощью Bootstrap 5

Запретить свечение фокуса управления формой Boostrap при нажатии

Как активировать пункт раскрывающегося меню начальной загрузки, нажав клавишу клавиатуры

Angular и Bootstrap — Маршруты

Как сделать выпадающее меню Bootstrap 5.2 на всю ширину страницы

Bootstrap 5 щелчок внутри раскрывающегося списка не должен открываться, закройте раскрывающийся список

Angular – почему мой раскрывающийся список не работает

Как я могу программно закрыть раскрывающийся список при нажатии кнопки?

Ответы 2

Другие вопросы по теме

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