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

Posted 2023-05-08

【中文标题】Bootstrap 下拉菜单 - 如果搜索栏被聚焦，则保持打开状态

【英文标题】：Bootstrap dropdown menu – stay open if search bar is focused

【发布时间】：2013-09-07 01:14:02

【问题描述】：

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

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

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

【问题讨论】：

当我点击搜索栏并将鼠标移开时，它保持打开状态。当我点击离开时，它就消失了。

尝试“bootply”作为 jsfiddle 的替代品（将来）

【参考方案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

【讨论】：

感谢您的意见@Joe！现在唯一的问题是，如果在搜索栏（输入）具有焦点时将它们悬停，我的其他菜单仍将打开（并且卡在打开状态）。我需要使其他菜单无法打开，除非在搜索栏聚焦时单击它们。

是的，我之前应该包含这个，抱歉。我已经更新它来解决这个问题。

谢谢，唯一的问题是您的修复破坏了我实际站点上的悬停行为。您真正需要的是在显示其他菜单之前检查 .events 下拉菜单是否不可见。如果您不介意，我将使用最终代码编辑您的答案，然后将其标记为已回答。

看起来您的编辑被拒绝了，可能是因为当前答案解决了问题中所述的问题。无论有没有.events，它在 CodePen 中的工作方式都是一样的。

是的，在 codepen 中的工作方式相同，但在生产中，事情变得一团糟。它必须是“.events .dropdown-menu:visible”。无论如何，谢谢你的帮助！

【参考方案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，希望对您有所帮助。

【讨论】：

感谢您回答 Shahar，但上面的答案正是我想要的。感谢您的帮助。