Bootstrap下拉菜單 - 如果搜索欄聚焦，則保持打開狀態

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，然后! 在否定之前，分別將這些轉化為真假。 然后在第一個懸停功能中，檢查以確保在打開之前沒有當前打開的菜單。

$('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演示

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菜單。（您可以將其設置為單擊，如果你要）。

這是一個小提琴 ，希望它的幫助。