如何在鼠标移出时消失子菜单 div 元素

Question

嗨，我有一个菜单和子菜单，子菜单有一个 div 元素。当我将鼠标悬停在我的第一个菜单 li 的超链接上时，我可以获得 div 元素，但是当我拿出我的来自 div 元素的鼠标。它不断出现，所以当我将鼠标移出 div 或其他地方时，我想隐藏 div 元素。在鼠标悬停时，我没有写“显示”、“无”的代码，因为它悬停在链接上工作，但它仍然出现。

HTML

<ul class="main-nav">
<li ><a href="#" id="menu1">Products & Services</a></li>
<li><a href="#" id="menu1">Solution and Technologies</a></li>
<li><a href="#" id="menu1">About Us</a></li>
<li><a href="#" id="menu1">Investors</a></li>
<li style="border:none;"><a href="#" id="menu1">Newsroom</a></li>
</ul>
<!--1st drop down menu -->
<div id="dropmenu1"  class="dropmenudiv" style=" position:absolute; font-size:12px; z-index:1;  display:none;  border:1px solid #D8D8D8;">
<a id="consumer1" style="visibility:hidden;"  href="#">Consumer & Home</a>
<a href="#">Aerospace & Defense</a>
<a href="#">Safety & Security</a>
<a href="#">Scanning & Mobile Productivity</a>
</div>

CSS

  .dropmenudiv a{ background:url(images/dropdown_bg.jpg); text-decoration:none; display:block; line-height:14px; padding:2px;}
    ul.main-nav{list-style:none; border:1px solid #666; overflow:hidden; background:url(images/mnu_grad_normal.jpg) repeat-x; height:37px; line-height:36px;}
    ul.main-nav li { float:left; font-size:12px; border-right:1px solid #999; padding:0px 32px;}
    ul.main-nav li a{ color:#000000; text-decoration:none;}
    ul.main-nav li a:hover{ color:#FF0000;}

JS：

 $(document).ready(function() {
        $('#menu1').mouseover(function(){
        $('#dropmenu1').css("display","block");
        $('#dropmenu1').css({'width':'202px','height':'auto'});
      $('#menu1').mouseout(function(){
        });

Answer 1

不使用 javascript。仅 CSS 菜单 Css Dropdown menu 和Fiddle的链接

<ul id="nav">
<li ><a href="#">Products & Services</a>
  <ul>
      <li><a id="consumer1" href="#">Consumer & Home</a></li>
      <li><a href="#">Aerospace & Defense</a></li>
      <li><a href="#">Safety & Security</a></li>
      <li><a href="#">Scanning & Mobile Productivity</a></li>
  </ul>
</li>
<li><a href="#">Solution and Technologies</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Investors</a></li>
<li style="border:none;"><a href="#">Newsroom</a></li>

</ul>
#nav{
    list-style:none;
    font-weight:bold;
    margin-bottom:10px;
       float:left;
    width:100%;
   }
#nav li{
    float:left;
    margin-right:10px;
    position:relative;
}
#nav a{
    display:block;
    padding:5px;
    color:#fff;
    background:#333;
    text-decoration:none;
}
#nav a:hover{
    color:#fff;
    background:#6b0c36;
    text-decoration:underline;
}
#nav ul{
    background:#fff;
    background:rgba(255,255,255,0);
    list-style:none;
    position:absolute;
    left:-9999px;
}
#nav ul li{
    padding-top:1px;
    float:none;
}
#nav ul a{
    white-space:nowrap;
}
#nav li:hover ul{ 
    left:0; 
}
#nav li:hover a{ 
    background:#6b0c36;
    text-decoration:underline;
}
#nav li:hover ul a{ 
    text-decoration:none;
}
#nav li:hover ul li a:hover{ 
    background:#333;
}

Answer 2

与.on()绑定

$(document).on('mouseenter','#divid',function(){
  // ...
})

$(document).on('mouseleave','#divid',function(){
  // ...
})

---

考虑使用hover

.hover() 方法绑定了 mouseenter 和 mouseleave 事件的处理程序。您可以使用它在鼠标位于元素内时简单地将行为应用于元素。

用法：

$(selector).hover(handlerIn, handlerOut)

---

伪解：

http://jsfiddle.net/7PH6d/1/

---

进一步阅读：

The friggin' API

Answer 3

您必须关闭 .mouseover。您的 mouseout-function 在 mouseover 函数中：

$(document).ready(function() {
      $('#menu1').mouseover(function(){
        $('#dropmenu1').css("display","block");
        $('#dropmenu1').css({'width':'202px','height':'auto'});
      }); //<----Close the mouseover
      $('#menu1').mouseout(function(){
        $("#dropmenu1").css("display","none"); //Should work
      });

Answer 4

您为页面中的多个元素使用了相同的 ID，这是不正确的过程。

我做了一些更改并且它正在工作，它可能会回答这个问题，但我建议你阅读有关创建菜单的教程，因为这看起来有点乱。

这是小提琴：http://jsfiddle.net/Te3dW/

Javascript 函数：

$(document).ready(function(){
    $('li:nth-child(1),#dropmenu1').hover(function(){
    $('#dropmenu1').css("display","block");
    $('#dropmenu1').css({'width':'202px','height':'auto'});
    },function(){
        $('#dropmenu1').css("display","none");
    });
});

快乐编码

Answer 5

首先使您的标识符唯一，然后您可以 setTimeout 在鼠标离开主菜单链接后立即暂停目标 div 的消失。脚本可能如下所示：

$(document).ready(function () {
    var target_div = null; // div#dropmenu1 etc.
    var timer = false; // for delayed hide
    $('.main-nav a').mouseenter(function () {
        if (timer) {
            clearTimeout(timer);
            timer = false;
        }
        $('.dropmenudiv').css('display', 'none'); //hide all divs
        target_div = $('#drop' + this.id); // #dropmenu1 etc.
        target_div.css({
            "display": "block", //show
            'width': '202px',
                'height': 'auto'
        });
    }).mouseleave(leaving);

    $('.dropmenudiv').mouseenter(function () {
        if (timer) {
            clearTimeout(timer);
            timer = false;
        }
        target_div = $(this);
    }).mouseleave(leaving);

    function leaving() {
        target_div = null;
        timer = setTimeout(function () {
            var divs = $('.dropmenudiv');
            if (target_div) {
                divs = divs.not(target_div);
            }
            divs.css('display', 'none');
            timer = false;
        }, 2000); //hide after two seconds
    }
});

工作 jsfiddle：http://jsfiddle.net/7PH6d/4/