我有一个带有Bootstrap 3.3.7主题的Drupal 8.6.8网站
我希望在单击外部时关闭导航菜单。我尝试使用代码:
(function ($) {
'use strict';
$(document).click(function (event) {
if (!$(event.target).closest('#navbar-collapse-first').length) {
$('.navbar-collapse-first').collapse('hide');
}
});
$(document).click(function (event) {
if (!$(event.target).closest('#navbar-collapse-second').length) {
$('.navbar-collapse-second').collapse('hide');
}
});
}(jQuery));
https://css-tricks.com/dangers-stopping-event-propagation/
它不起作用,如果我在导航菜单之外单击,则不会起作用。此代码仅在删除第二个或保留第二个并删除第一个的情况下有效。
如何在2菜单上应用它?
更新:
我找到了答案:
(function ($) {
'use strict';
$(document).click(function (event) {
if (!$(event.target).closest('#navbar-collapse-first').length) {
$('.navbar-collapse-first').collapse('hide');
}
if (!$(event.target).closest('#navbar-collapse-second').length) {
$('.navbar-collapse-second').collapse('hide');
}
});
}(jQuery));
答案 0 :(得分:0)
您是否尝试过:
$(document).click(function (event) {
if (!$(event.target).closest('#navbar-collapse-second, #navbar-collapse-second').length) {
$('.navbar-collapse-second, .navbar-collapse-second').collapse('hide');
}
});
答案 1 :(得分:0)
您可以使用此功能
type
并像
一样使用它function OnwindowClick(elem , action){
$(document).on('click',function(e){
if (!$(elem).is(e.target) // if the target of the click isn't the container...
&& $(elem).has(e.target).length === 0) // ... nor a descendant of the container
{
action();
}
});
}
注释:
无需使用// OnwindowClick(elem , action) add the prevent elements in `elem` something like this
OnwindowClick('#navbar-collapse-first , #navbar-collapse-second', function(){
$('.navbar-collapse-first, .navbar-collapse-second').collapse('hide');
});
直接使用选择器
.closest()
是防止文档单击的元素
其他:您仍然需要将按钮添加到elem
.. elem
示例如何使用此功能
#navbar-collapse-first , #navbar-collapse-second , button1_Selector , button2_Selector
$(document).ready(function(){
$('button.clickable').on('click' , function(){
$(this).text($(this).text() == 'Like' ? 'Dislike' : 'Like');
});
OnwindowClick('button.clickable' , function(){
$('button.clickable').fadeOut(400);
setTimeout(function(){
$('button.clickable').fadeIn(400);
} , 5000);
});
});
function OnwindowClick(elem , action){
$(document).on('click',function(e){
if (!$(elem).is(e.target) // if the target of the click isn't the container...
&& $(elem).has(e.target).length === 0) // ... nor a descendant of the container
{
action();
}
});
}