A Bootstrap 5 dropdown menu is displayed below, consisting of labeled checkboxes and equipped with data-bs-auto-close="outside" attribute to auto-close the menu on outside click.
<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>
The objective is to close the menu when either the "Apply" or "Reset" button is clicked. Here is the function intended for this purpose:
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/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/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>However, the function results in an error message:
dropDownButton.dropdown is not a function
Where could the mistake possibly lie?