Я использую раскрывающееся меню Bootstrap. Проблема в том, что он никогда не падает при первом нажатии; Мне нужно нажать 2 раза, чтобы его можно было переключить. Я думаю, что событие click каким-то образом застревает где-то, прежде чем распространяться вниз...
Есть ли способ исправить это?
Если кто-то использует angular с модулем ui-bootstrap вместе с обычным определением выпадающего HTML-кода начальной загрузки, нужны также два клика.
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
[...]
</li>
= > Удаление data-toggle="dropdown" устраняет проблему.
После этого откроется раскрывающееся меню одним щелчком.
В Bootstrap 4 bootstrap.min.js и bootstrap.bundle.min.js теперь конфликтуют в выпадающем списке.
После удаления bootstrap.min.js проблема двойного щелчка в раскрывающемся списке будет решена.
Это может произойти, если Bootstrap будет дважды включен в ваш проект.
Если bootstrap.min.js и bootstrap.bundle.min.js(bootstrap и popper js) включены в проект, это означает избыточный загрузчик js.
Комбинация js должна быть такой: Либо: только bootstrap.bundle.min.js Или: bootstrap.min.js И popper.min.js Для получения подробной информации посетите https://getbootstrap.com/docs/4.1/getting-started/contents/
Это происходит потому, что синтаксис Twitter Bootstrap для их раскрывающихся списков включает тег href. Для предотвращения этого вам понадобится preventDefault и stopPropagation. Что-то вроде этого сделает трюк:
$('.dropdown-toggle').click(function(e) {
e.preventDefault();
e.stopPropagation();
return false;
});
В BootStrap 4 One не следует включать и "bootstrap.bundle.min.js", и "bootstrap.min.js". Это вызовет проблему DropDown. Сохраняйте только "bootstrap.bundle.min.js", так как он будет иметь весь необходимый код.
В моем случае другие ответы не работают.
В application.js у меня было:
//= require popper.min
//= require bootstrap-sprockets
Удаление загрузочных звездочек решило проблему.
Изучая исходный код angular.ui.bootstrap и собственный bootstrap.js, у них есть оба обработчика для выпадающих списков.
Предлагаемое решение: отрегулируйте директиву angular.ui.bootstrap dropdownToggle, ограничивая только атрибуты "А". поэтому, разрешив эту проблему, вам нужно изменить dropdownToggle ограничить "CA" на "A", это скроет класс looker от angular.ui.bootstrap, который уже обрабатывается bootstrap.js
для мини-версии angular.ui.bootstrap найдите эту строку директива ( "dropdownToggle", функция() {возвращение {ограничение: "CA" , требует: "^ выпадающего списка", ссылка: функция (а, Ь, с, d) {
замените "CA" на "A".
Приветствия
У меня была та же проблема, что и jaybro в fooobar.com/questions/210754/..., однако их решение не помогло.
Для исправления обоих случаев нужно было добавить:
data-disabled="true"
на элемент с атрибутом data-toggle="dropdown".
Это также может произойти, если у вас есть несколько файлов bootstrap.js! Проверьте, есть ли у вас более старая версия, и удалите этот скрипт.
Я решил проблему, удалив ссылку на bootstrap.bundle.js и добавив ссылку на popper.js
Перед
<script src="bootstrap/jquery/jquery.js"></script>
<script src="bootstrap/js/bootstrap.bundle.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
After
<script src="bootstrap/jquery/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
Обратите внимание, что я загрузил файлы начальной загрузки и сохранил их в каталоге с именем bootstrap. Внутри него было три разных каталога: "css", "js", "jquery".
Я обнаружил, что на некоторых страницах мне нужно было бы дважды щелкнуть, а другие страницы были бы одним кликом.
Удаление data-toggle="dropdown" сделало двойные щелчки одним синглом и сломал синглы.
Я сравнил html в инструменте dev (потому что тот же html обслуживается) и найденный на моих страницах с двойным щелчком div с переключением данных выглядел так:
<div id="notifications" data-toggle="dropdown" class="dropdown-toggle"
aria-haspopup="true" aria-expanded="false">
Но одноглавый html выглядит следующим образом:
<div id="notifications" data-toggle="dropdown" class="dropdown-toggle">
Итак, в документе готовы, я использовал attr-обнаружение и предотвратил ответ по умолчанию, и он открыл мой двойной щелчок в один клик:
if (!($('#notifications').attr('aria-haspopup') == undefined &&
$('#notifications').attr('aria-expanded') == undefined))
{
$('.dropdown-toggle').click(function (e) { return false; });
}
Как @rajaneesh-singh сказал нам выше, эта ошибка возникает, когда Bootstrap включен дважды.
В моем случае у меня был дубликат с официальной загрузкой и с версией в твиттере:
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/bootstrap.js"></script>
Я только что удалил версию в твиттере, и теперь все работает хорошо.
Недавно я столкнулся с той же проблемой, и решил ее, написав собственный скрипт:
<div class="filter-dropdown text-right">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Edit</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
</div>
$(".filter-dropdown").on("click", ".dropdown-toggle", function(e) {
e.preventDefault();
$(this).parent().addClass("show");
$(this).attr("aria-expanded", "true");
$(this).next().addClass("show");
});