Question

我正在尝试创建一个自定义的引导程序下拉菜单，该菜单在悬停时打开和关闭（我已经工作），但如果搜索栏聚焦在“事件”下拉菜单中，直到它失去焦点或用户点击，它也会保持打开状态从下拉列表。

这是我的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'); 
    }
 });

这是一个codepen，因此您可以看到我的其余代码：http://codepen.io/webinsation/pen/bfDsB

我已经尝试了几种不同的方法来解决这个问题，使用jquery的is（'：focus'）选择器没有结果。

我感谢您的任何帮助或想法。谢谢， - 迦勒

Answer 1

您可以使用: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 demo

Answer 2

我会试试。

我使用了hover()函数，它是回调函数。

function () {
    if (!$("#search-query").is(':focus')){
        $(this).removeClass('open');
    } else if ( !$( '.events' ).is( ':hover' ) ) {
        $("#search-query").blur();
        $('.dropdown-menu').hide();
    }
});

悬停它几乎一样，你可以把它设置回最接近的状态。

在回调中（没有悬停）我检查.events是否被悬停（因此它会显示每个其他菜单项下拉菜单，并在删除鼠标时隐藏.events菜单。（如果需要，可以将其设置为单击。）

这是一个Fiddle，希望它可以提供帮助。

Bootstrap下拉菜单 - 如果搜索栏聚焦，则保持打开状态

2 个答案: