Bootstrap下拉菜单–如果搜索栏集中，请保持打开状态

Bootstrap dropdown menu – stay open if search bar is focused

本文关键字：状态 下拉菜单 如果 搜索栏 集中 Bootstrap      更新时间：2023-09-26

我正在尝试创建一个自定义的引导程序下拉菜单，该菜单在悬停时打开和关闭（我正在处理），但如果搜索栏集中在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，希望它能帮助你。

相关文章：