0

嗨，我有一个菜单和子菜单，子菜单有一个 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(){
        });
4

5 回答 5

2

不用javascript就可以做到。仅 Css 菜单Css 下拉菜单 和指向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;
}
于 2013-07-11T14:21:28.573 回答
1

使用.on()绑定

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

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

考虑使用悬停

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

用法：

$(selector).hover(handlerIn, handlerOut)

伪解决方案：

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

进一步阅读：

该死的 API

于 2013-07-11T14:10:08.540 回答
0

您必须关闭 .mouseover。您的 mouseout 功能位于 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
      });
于 2013-07-11T14:17:27.760 回答
0

首先使您的标识符唯一，然后您可以 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/

于 2013-07-11T14:20:03.843 回答
0

您为页面中的多个元素使用了相同的 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");
    });
});

快乐编码

于 2013-07-11T14:29:17.887 回答