jQuery：尽管来自输入元素的浏览器提案仍然保持悬停 [英] jQuery: Keep hovering despite browser proposal from input element

问题描述

我有一个像这样嵌套的 ul 列表的导航

 < ul id ='mainNav'> 
< li>有些东西！ 
< ul> 
< li>第1页< / li> 
< li>第2页< / li> 
< / ul> 
< / li> 
< li>悬停在这里登录！ 
< ul> 
< li> 
< div class ='login'> 
< p>登入< / p> 
< input type ='password'> 
<按钮>好的< /按钮> 
< / div> 
< / li> 
< / ul> 
< / ul> 
  

我使用jQuery来显示悬停的菜单

  $（'ul＃mainNav> li'）。hover（function（）{
 $（this）.addClass（showMenu）; 
），
 function（）{
 $（this）.removeClass（showMenu）; 
} 
）; 
  

这工作正常，除了登录的输入框。在将鼠标指针从输入框移动到浏览器提议条目的时候，jQuery认为一个元素离开了 li 元素，并移除了showMenu类，以便子菜单消失。

因此，当我将鼠标悬停在 li 元素上时，登录表单打开

只要我将鼠标悬停在浏览器提案上， li 元素消失，浏览器提案

我还创建了一个< a href =https://jsfiddle.net/p1qqxxe2/ =nofollow noreferrer> jFiddle 。

如何告诉jQuery保留徘徊，如果我移动浏览器提案从输入元素？

解决方案

作为解决方案您可以删除类 .showMenu 如果没有输入event.target
当下拉变为隐藏时也模糊输入n

$（'ul＃mainNav> （'）{$（this）.addClass（showMenu）;}，function（e）{if（！$（e.target）.is（'input'））{$（ this）.removeClass（showMenu）; $（'input'）。blur（）;}}）;

 ＃mainNav> li {border：3px solid＃08C; background-color：#FFF; display：inline-block;}＃mainNav li {margin：0; padding：0;}＃mainNav，＃mainNav ul {list-style：none;保证金：0; padding：0;}＃mainNav li> ul {position：absolute;显示：无; z-index：1; min-width：200px; padding：0px; margin：0px; text-align：left; background-color：#FFF; box-sizing：border-box;}＃mainNav li.showMenu> ul {display：block} .login {border：3px solid＃08C; padding：20px; margin：0}  

< script src =https： //ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js\"></script><form method> < ul id ='mainNav'> <李>悬停在这里登录！ < UL> <李> < div class ='login'> < p为H.登录与LT; / p为H. < input type ='password'> <按钮>好的< /按钮> < / DIV> < /锂> < / UL> < / ul>< / form>

=https://jsfiddle.net/dzt87zbk/ =nofollow noreferrer> https://jsfiddle.net/dzt87zbk/

I have a navigation given by an nested ul list like this

<ul id='mainNav'>
 <li> Some Stuff!
    <ul>
     <li>Page 1</li>
     <li>Page 2</li>
    </ul>
 </li>
 <li> Hover here to login! 
   <ul >
    <li>
     <div class='login'>
      <p>Login</p>
      <input type='password'>
      <button>Okay</button>
    </div>
   </li>
  </ul>
</ul>

and I use jQuery to show the menu on hover

$('ul#mainNav > li').hover(function() {
    $(this).addClass("showMenu");
  },
  function(){
    $(this).removeClass("showMenu");
  }
);

This works fine, except for the input box for the login. In the moment where one moves the mouse pointer from the input box to a browser proposal entry, jQuery thinks that one left the li element and removes the class showMenu so that the submenu disappears.

So when I hover over the li element the login form opens

And as soon as I hover over the browser proposal the li element dissapears except for the browser proposal

I also created a jFiddle.

How can I tell jQuery to keep hovering if I move over the browser proposal from the input element?

解决方案

As a solution You can remove the class .showMenu if event.target is not input Also blur the input when the dropdown becomes hidden

$('ul#mainNav > li').hover(function(e) {
    $(this).addClass("showMenu");
  },
  function(e) {
    if (!$(e.target).is('input')) {
      $(this).removeClass("showMenu");
      $('input').blur();
    }
  });

#mainNav>li {
  border: 3px solid #08C;
  background-color: #FFF;
  display: inline-block;
}

#mainNav li {
  margin: 0;
  padding: 0;
}

#mainNav,
#mainNav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#mainNav li>ul {
  position: absolute;
  display: none;
  z-index: 1;
  min-width: 200px;
  padding: 0px;
  margin: 0px;
  text-align: left;
  background-color: #FFF;
  box-sizing: border-box;
}

#mainNav li.showMenu>ul {
  display: block
}

.login {
  border: 3px solid #08C;
  padding: 20px;
  margin: 0
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method>

  <ul id='mainNav'>
    <li> Hover here to login!

      <ul>
        <li>
          <div class='login'>
            <p>Login</p>
            <input type='password'>
            <button>
   Okay
   </button>
          </div>

        </li>
      </ul>
  </ul>
</form>

https://jsfiddle.net/dzt87zbk/

这篇关于jQuery：尽管来自输入元素的浏览器提案仍然保持悬停的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！