3

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

这是我的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') 选择器来解决这个问题，但没有结果。

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

4

2 回答 2

2

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

于 2013-09-03T18:10:35.560 回答
0

我会试试的。

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

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

悬停时几乎相同，您可以将其设置回最接近以前的位置。

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

这是一个小提琴，希望它有所帮助。

于 2013-09-03T18:38:13.463 回答