我正在尝试创建一个自定义的引导程序下拉菜单,该菜单在悬停时打开和关闭(我正在处理),但如果搜索栏集中在Events下拉菜单中,则也会保持打开状态,直到它失去焦点或用户单击离开下拉菜单。
这是我的js代码:
$('ul.nav li.dropdown').hover(function() {
$(this).closest('.dropdown-menu').show(); $(this).addClass('open'); },
function() {
$("#search-query").focusin(function() {
$('.events').addClass('search-active');
});
if ($('.events').hasClass('search-active')) {
return;
} else {
$(this).closest('.dropdown-menu').hide(); $(this).removeClass('open');
}
});
这是一个代码笔,您可以看到我的其余代码:http://codepen.io/webinsation/pen/bfDsB
我已经尝试了几种不同的方法来解决这个问题,使用jquery的is(':focus')选择器,但没有结果。
我感谢你的任何帮助或想法。谢谢–Caleb
您可以使用:focus
来查找搜索框是否在第二个hover
函数中具有焦点,而无需提供任何其他事件。如果.size()
有焦点,它将返回1,否则返回0,然后!
在否定之前分别将其转换为true和false。然后在第一个悬停功能中,检查以确保在打开之前没有当前打开的菜单。
$('ul.nav li.dropdown').hover(function() {
if (!$(".dropdown-menu:visible").size()) {
$(this).closest('.dropdown-menu').show(); $(this).addClass('open');
}
},
function() {
if (!$(".navbar-search input:focus").size()) {
$(this).closest('.dropdown-menu').hide(); $(this).removeClass('open');
}
});
CodePen演示
我会试试的。
我使用了hover()
函数,它是回调函数。
function () {
if (!$("#search-query").is(':focus')){
$(this).removeClass('open');
} else if ( !$( '.events' ).is( ':hover' ) ) {
$("#search-query").blur();
$('.dropdown-menu').hide();
}
});
在悬停时,它几乎是一样的,你可以把它设置回最接近的,就像以前一样。
在回调(无悬停)中,我检查.events
是否悬停(因此它将显示其他菜单项的下拉菜单,并在移除悬停时隐藏.events
菜单。(如果需要,可以将其设置为单击)。
这是一个Fiddle,希望它能帮助你。