Вот мой сценарий и стиль включает в себя:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Stuff
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Stuff 1</a>
<a class="dropdown-item" href="#">Stuff 2</a>
<a class="dropdown-item" href="#">Stuff 3</a>
</div>
</div>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Actions
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton2">
<a class="dropdown-item" href="#">Action1</a>
<a class="dropdown-item" href="#">Action 2</a>
<a class="dropdown-item" href="#">Action 3</a>
</div>
</div>
Проблема, возникающая при щелчке между этими раскрывающимися списками, не закрывает ранее нажатый раскрывающийся список. Я заметил, что классы show и open добавляются при первом нажатии на раскрывающийся список. Класс open , по-видимому, не удаляется до тех пор, пока не будет нажат ни один элемент, кроме раскрывающегося списка.
Этот класс open , по-видимому, не добавлен впримеры на сайте начальной загрузки.
Я хочу сохранить поведение при нажатии, но также закрыть меню. Я нажимаю между двумя элементами раскрывающегося меню начальной загрузки.
Некоторая помощь будет принята с благодарностью. Спасибо.