Ответ 1
Попробуйте следующее:
$('.dropdown.open .dropdown-toggle').dropdown('toggle');
Это также может работать для вас:
$('[data-toggle="dropdown"]').parent().removeClass('open');
Это становится раздражающим. когда я нажимаю на элемент в раскрывающемся списке Bootstrap, выпадающее меню не закрывается. Я установил его, чтобы открыть лайтбокс Facebox, когда вы нажимаете раскрывающийся список, но есть проблема с ним.
Когда элемент щелкнут, я попытался сделать это:
$('.dropdown.open').removeClass('open');
$('.dropdown-menu').hide();
Это скрывает его, но по какой-то причине он не откроется снова.
Как вы можете видеть, мне действительно нужно, чтобы раскрывающийся список закрывался, потому что он выглядит дерьмовым, когда он остается открытым (главным образом потому, что выпадающее меню z-index
выше, чем наложение модального окна Facebox.
Если вам интересно, почему я не использую красивую модальную рамку, встроенную в Bootstrap, это происходит потому, что:
$.facebox({ajax:'/assets/ajax/dialogs/dialog?type=block-user&id=1234567'});
Попробуйте следующее:
$('.dropdown.open .dropdown-toggle').dropdown('toggle');
Это также может работать для вас:
$('[data-toggle="dropdown"]').parent().removeClass('open');
попробовал большинство вариантов отсюда, но никто из них не работал у меня. ($('.dropdown.open').removeClass('open');
действительно спрятал его, но если вы перебрались, прежде чем щелкнуть что-нибудь еще, он снова появится.
поэтому я делаю это с помощью $("body").trigger("click")
Вам нужно всего лишь сделать $('.dropdown.open').removeClass('open');
удалить вторую строку, которая скрывает выпадающее меню.
$('.open').removeClass('open');
Сделал это для меня.
Это можно сделать без написания кода JavaScript, добавив атрибут data-toggle = "dropdown" в якорный тег, как показано ниже:
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#" data-toggle="dropdown">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#" data-toggle="dropdown">Another action</a></li>
</ul>
</div>
Выбранный ответ не сработал у меня, но я думаю об этом из-за более новой версии Bootstrap. В итоге я написал это:
$('.btn-navbar').addClass('collapsed');
$('.nav-collapse').removeClass('in').css('height', '0');
Надеюсь, это поможет кому-то еще в будущем.
Это то, что сработало для меня:
$(this).closest(".dropdown").find(".dropdown-toggle").dropdown("toggle");
Зачем использовать мой метод, потому что если пользователь выходит из div, этот метод позволяет пользователю задерживаться до того, как подменю исчезнет. Это похоже на использование плагина superfish.
1) Первая загрузка hover намерения javascript
Ссылка здесь: Hover-намерение javascript
2) Вот мой код для выполнения
$(document).ready(function(){
var config = {
over: showBootrapSubmenu,
timeout: 500,
out: hideBootrapSubmenu
};
function showBootrapSubmenu(){
$(this).addClass('open');
}
function hideBootrapSubmenu(){
$(this).removeClass('open');
}
//Hover intent for Submenus
$(".dropdown").hoverIntent(config);
});
Попробуйте открыть HTML с помощью Bootstrap Modal, я использую этот код:
$(function() {
$('a[data-toggle=modal]').click(function(e) {
e.preventDefault();
var page = $(e.target).attr('href');
var url = page.replace('#','');
$(page).on('show', function () {
$.ajax({
url: "/path_to/"+url+".php/html/...",
cache: false,
success: function(obj){
$(page).css('z-index', '1999');
$(page).html(obj);
}
});
})
});
});
и ссылка выглядит так:
<a href="#my_page" data-toggle="modal">PAGE</a>
$('.dropdown.open').removeClass('open');
Считывая документацию и используя JavaScript, это можно сделать с помощью метода toggle:
$('.button-class').on('click',function(e) {
e.preventDefault();
$('.dropdown-class').dropdown('toggle');
}
Вы можете прочитать об этом в: http://getbootstrap.com/javascript/#dropdowns-methods
Попробуйте это!
.removeClass("open").trigger("hide.bs.dropdown").trigger("hidden.bs.dropdown");
ИЛИ
$(clicked_element).trigger("click");
Он всегда работает для меня.
Вот мое решение о том, как закрыть выпадающее меню и переключить кнопку:
$(".btn-group.open", this)
.trigger("click")
.children("a.dropdown-toggle")
.trigger("blur")
Где "this" - глобальный контейнер группы кнопок.
это сработало для меня, у меня была панель навигации и несколько выпадающих меню.
$(document).ready(function () {
$('a.dropdown-toggle').each(function(){
$(this).on("click", function () {
$('li.dropdown').each(function () {
$(this).removeClass('open');
});
});
});
});
Самый простой способ сделать это: добавить ярлык hide:
<label class="hide_dropdown" display='hide'></label>
то каждый раз, когда вы хотите скрыть выпадающий список, вы вызываете:
$(".hide_dropdown").trigger('click');
Не знаю, поможет ли это кому-либо (может быть, это слишком специфично для моего дела, а не к этому вопросу), но для меня это сработало:
$('.input-group.open').removeClass('open');
После нажатия:
// Hide mobile menu
$('.in,.open').removeClass('in open');
// Hide dropdown
$('.dropdown-menu').css('display','none');
setTimeout(function(){
$('.dropdown-menu').css('display','');
},100);
Используйте class= "dropdown-toggle" в теге привязки, затем, когда вы нажимаете на тег привязки, он закрывает выпадающее окно бутстрапа.
Эй, этот простой трюк jQuery должен помочь.
$(".dropdown li a").click(function(){
$(".dropdown").removeClass("open");
});
Простой способ:
$('.navbar-collapse a').click(function(){
$('.navbar-toggle').trigger('click')
})
этот код можно использовать в текущем обработчике событий
$('.in,.open').removeClass('in open');
в моем сценарии я использовал, когда ajax-вызов завершен
jQuery(document).on('click', ".woocommerce-mini-cart__buttons .wc-forward.checkout", function() {
var _this = jQuery(this);
ajax_call(_this.attr("data-ajax-href"), "checkout-detail");
$('.in,.open').removeClass('in open');
return false;
});