Bootstrap下拉菜单 - 如果搜索栏集中，保持打开 [英] Bootstrap dropdown menu – stay open if search bar is focused

问题描述

我试图创建一个自定义的引导下拉菜单，打开和关闭悬停（我已经工作），但如果搜索栏集中在事件下拉菜单中，直到它失去焦点或用户点击离开

这是我的js代码：

  $ （'ul.nav li.dropdown'）。hover（function（）{
 $（this）.closest（'。dropdown-menu'）show（）; $（this）.addClass ）;}，
 function（）{
 $（＃search-query）。focusin（function（）{
 $（'。events'）。addClass '）; 
}）; 
 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，然后！假，分别，否定之前。然后在第一个悬停功能中，检查以确保在打开之前没有当前打开的菜单。

  $（'ul.nav li.dropdown'）。hover（function（）{
 if（！$（。dropdown-menu：visible））size（））{
 $（this）.closest -menu'）。show（）; $（this）.addClass（'open'）; 
} 
}，
 function（）{
 if .navbar-search input：focus）。size（））{
 $（this）.closest（'。dropdown-menu'）hide（）; $（this）.removeClass 
} 
}）; 
  

CodePen demo

I am trying to create a customized bootstrap dropdown menu that opens and closes on hover (which I have working), but also stays open if the search bar is focused in the Events dropdown menu until it loses focus or the users clicks away from the dropdown.

Here is my js code:

$('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'); 
    }
 });

Here is a codepen so you can see the rest of my code: http://codepen.io/webinsation/pen/bfDsB

I have tried several different ways to solve this using jquery’s is(':focus') selector with no results.

I appreciate any help or ideas you may have. Thanks, – Caleb

解决方案

You can use :focus to find if the search box has focus in the second hover function, without any need to give things additional events. .size() will return 1 if it has focus and 0 otherwise, and then the ! casts those to true and false, respectively, before negating. Then in the first hover function, check to make sure there are no currently open menus before opening.

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

这篇关于Bootstrap下拉菜单 - 如果搜索栏集中，保持打开的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！