Javascript悬停关闭不在正确的区域工作

Question

任何人都可以告诉我我做错了我的下拉菜单吗？当我将鼠标从'WEDDINGS'移开时它需要关闭，但只有当我将鼠标移离顶部菜单时它才会关闭。

http://www.wedevents.com.au/weddings.asp

任何帮助将不胜感激。

HTML：

<ul class="topnav"> 
    <li> 
     <a href="http://www.wedevents.com.au/index.asp"> 
     <img src="/images/menu_home.gif" name="home" onMouseOver="over(0)" onMouseOut="out(0)" alt="Home" /></a> 
    </li> 
    <li> 
     <a href="http://www.wedevents.com.au/about.asp"> 
     <img src="/images/menu_about.gif" name="about" onMouseOver="over(1)" onMouseOut="out(1)" alt="About" /></a> 
    </li> 
    <li class="ddmhover"> 
     <a href="http://www.wedevents.com.au/weddings.asp"> 
     <img src="/images/menu_weddings.gif" name="weddings" onMouseOver="over(2)" onMouseOut="out(2)" alt="Weddings" /></a> 
     <ul class="subnav"> 
      <li><a href="http://www.wedevents.com.au/grand.asp">Grand Package</a></li> 
      <li><a href="http://www.wedevents.com.au/premium.asp">Premium Package</a></li> 
      <li><a href="http://www.wedevents.com.au/platinum_beach.asp">Platinum Beach Package</a></li> 
      <li><a href="http://www.wedevents.com.au/prestige.asp">Prestige Package</a></li> 
      <li><a href="http://www.wedevents.com.au/beach.asp">Beach Package</a></li> 
      <li><a href="http://www.wedevents.com.au/garden.asp">Garden Package</a></li> 
      <li><a href="http://www.wedevents.com.au/intimate.asp">Intimate Package</a></li> 
      <li><a href="http://www.wedevents.com.au/reception.asp">Reception Packages</a></li> 
     </ul> 
    </li> 
    <li> 
     <a href="http://www.wedevents.com.au/planning.asp"> 
     <img src="/images/menu_planning.gif" name="planning" onMouseOver="over(3)" onMouseOut="out(3)" alt="Planning" /></a> 
    </li> 
    <li> 
     <a href="http://www.wedevents.com.au/gallery.asp"> 
     <img src="/images/menu_gallery.gif" name="gallery" onMouseOver="over(4)" onMouseOut="out(4)" alt="Gallery" /></a> 
    </li> 
    <li class="ddmhover2"> 
     <a href="http://www.wedevents.com.au/equipment.asp"> 
     <img src="/images/menu_equipment.gif" name="equipment" onMouseOver="over(5)" onMouseOut="out(5)" alt="Equipment" /></a> 
     <ul class="subnav2"> 
      <li><a href="http://www.wedevents.com.au/equipment01.asp">Portable Gazebo</a></li> 
      <li><a href="http://www.wedevents.com.au/equipment02.asp">Welcome Easel</a></li> 
      <li><a href="http://www.wedevents.com.au/equipment03.asp">Wishing Well</a></li> 
      <li><a href="http://www.wedevents.com.au/equipment04.asp">Chairs, Covers &amp; Sash</a></li> 
      <li><a href="http://www.wedevents.com.au/equipment05.asp">Americana Chairs</a></li> 
      <li><a href="http://www.wedevents.com.au/equipment06.asp">Church Pews</a></li> 
      <li><a href="http://www.wedevents.com.au/equipment07.asp">Wedding Umbrellas</a></li> 
      <li><a href="http://www.wedevents.com.au/equipment08.asp">Handcrafted Pedestals</a></li> 
      <li><a href="http://www.wedevents.com.au/equipment09.asp">Bollards &amp; Handrail</a></li> 
      <li><a href="http://www.wedevents.com.au/equipment10.asp">Silk Flower Arrangements</a></li> 
      <li><a href="http://www.wedevents.com.au/equipment11.asp">Red Carpet</a></li> 
      <li><a href="http://www.wedevents.com.au/equipment14.asp">White Carpet</a></li> 
      <li><a href="http://www.wedevents.com.au/equipment12.asp">Ceremonial Arch</a></li> 
      <li><a href="http://www.wedevents.com.au/equipment13.asp">Instant Marquee</a></li> 
     </ul> 
    </li> 
    <li> 
     <a href="http://www.wedevents.com.au/contact.asp"> 
     <img src="/images/menu_contact.gif" name="contact" onMouseOver="over(6)" onMouseOut="out(6)" alt="Contact Us" /></a> 
    </li> 
</ul> 

CSS：（！我复制和修改，这个......原谅的一塌糊涂）

ul.topnav { 
    list-style: none; 
    padding: 0 85px; 
    margin: 0 auto; 
    width: 630px; 
    height: 36px; 
    background: #b09a27; 
    font-size: medium; 
    text-align: left; 
} 
ul.topnav li { 
    float: left; 
    margin: 0; 
    padding: 0; 
    position: relative; /*--Declare X and Y axis base for sub navigation--*/ 
} 
ul.topnav li img{ 
    border: 0; 
} 
ul.topnav li a{ 
    padding: 0; 
    color: #fff; 
    display: block; 
    text-decoration: none; 
    float: left; 
} 
/*--ul.topnav li a:hover{ 
    background: url(/images/ddm_hover.gif) no-repeat center top; 
}--*/ 
ul.topnav li span { /*--Drop down trigger styles--*/ 
    width: 17px; 
    height: 35px; 
    float: left; 
    background: url(/images/subnav_btn.gif) no-repeat center top; 
} 
ul.topnav li span.subhover { /*--Hover effect for trigger--*/ 
    background-position: center bottom; 
    cursor: pointer; 
} 
ul.topnav li ul.subnav, ul.subnav2 { 
    list-style: none; 
    position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/ 
    left: 0; 
    top: 35px; 
    /*--background: #333;--*/ 
    margin: 0; 
    padding: 0; 
    display: none; 
    float: left; 
    width: 170px; 
    -moz-border-radius-bottomleft: 5px; 
    -moz-border-radius-bottomright: 5px; 
    -webkit-border-bottom-left-radius: 5px; 
    -webkit-border-bottom-right-radius: 5px; 
    /*--border: 1px solid #111;--*/ 
} 
ul.topnav li ul.subnav li, ul.subnav2 li { 
    margin: 0; padding: 0; 
    /*--border-top: 1px solid #252525;--*/ /*--Create bevel effect--*/ 
    /*--border-bottom: 1px solid #444;--*/ /*--Create bevel effect--*/ 
    clear: both; 
    width: 170px; 
} 
html ul.topnav li ul.subnav li a, ul.subnav2 li a { 
    float: left; 
    width: 180px; 
    background: #B09A27 url(/images/ddm_right_arrow.gif) no-repeat 10px center; 
    padding-left: 20px; 
    padding-bottom: 2px; 
    padding-top: 2px; 
} 
html ul.topnav li ul.subnav li a:hover, ul.subnav2 li a:hover { /*--Hover effect for subnav links--*/ 
    background: #B09A27 url(/images/ddm_right_arrow.gif) no-repeat 10px center; 
    color: #d0bd73; 
} 

JAVASCRIPT：（上半部分是举行婚礼下半部分用于设备）

$(document).ready(function(){ 
    $("ul.topnav li.ddmhover").hover(function() { //When trigger is hovered... 

     //Following events are applied to the subnav itself (moving subnav up and down) 
     $(this).parent().find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on hover 

     $(this).parent().hover(function() { 
     }, function(){ 
      $(this).parent().find("ul.subnav").slideUp('slow').stop(true,true); //When the mouse hovers out of the subnav, move it back up 
     }); 
     //Following events are applied to the trigger (Hover events for the trigger) 
     }).hover(function() { 
      $(this).addClass("subhover"); //On hover over, add class "subhover" 
     }, function(){ //On Hover Out 
      $(this).removeClass("subhover"); //On hover out, remove class "subhover" 
    }); 
    $("ul.topnav li.ddmhover2").hover(function() { //When trigger is hovered... 

     //Following events are applied to the subnav itself (moving subnav up and down) 
     $(this).parent().find("ul.subnav2").slideDown('fast').show(); //Drop down the subnav on hover 

     $(this).parent().hover(function() { 
     }, function(){ 
      $(this).parent().find("ul.subnav2").slideUp('slow').stop(true,true); //When the mouse hovers out of the subnav, move it back up 
     }); 
     //Following events are applied to the trigger (Hover events for the trigger) 
     }).hover(function() { 
      $(this).addClass("subhover"); //On hover over, add class "subhover" 
     }, function(){ //On Hover Out 
      $(this).removeClass("subhover"); //On hover out, remove class "subhover" 
    }); 
}); 

Answer 1

$(document).ready(function(){ 
    $("ul.topnav li.ddmhover").hover(function() { //When trigger is hovered... 

     //Following events are applied to the subnav itself (moving subnav up and down) 
     $(this).parent().find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on hover 

     // Right here you are attaching to .ddmhover's parent ".topnav", 
     // not .ddmhover, so it is sliding up when you mouseOut of ".topnav" 
     // This should be in a function that is a second parameter to your first 
     // .hover() call instead of this... 
     $(this).parent().hover(function() { 
     }, function(){ 
      $(this).parent().find("ul.subnav").slideUp('slow').stop(true,true); //When the mouse hovers out of the subnav, move it back up 
     }); 
     //Following events are applied to the trigger (Hover events for the trigger) 
     }).hover(function() { 
      $(this).addClass("subhover"); //On hover over, add class "subhover" 
     }, function(){ //On Hover Out 
      $(this).removeClass("subhover"); //On hover out, remove class "subhover" 
}); 

更新

我重写它是更广义的。这样你就不需要为你创建的每个下拉菜单和子菜单都有一个单独的类名。相反，你只需使用“.ddmhover”和“.subnav”。

$(document).ready(function(){ 
    $("li.ddmhover").mouseover(function() { 
     var that = this, 
     subnav = $(this).find("ul.subnav"), 
     img = $(this).find('img'), 
     subnavTimeout; 

     $(this).addClass("subhover"); 
     subnav.slideDown('fast'); 

     var hideSubnav = function (evt) { 
      // Wait half a second before trying to hide subnav 
      subnavTimeout = setTimeout(function() { 
       $(subnav).unbind('mouseleave'); 
       $(subnav).slideUp('slow'); 
       $(that).removeClass("subhover"); 
      }, 500); 
     }; 

     $(subnav).mouseleave(hideSubnav) 
     // since the title image fills the whole .ddmhover li we must attach to the image itself 
     $(img).mouseleave(hideSubnav); 

     // If the mouse entered the subnav don't close the subnav 
     $(subnav).mouseenter(function() { 
      clearTimeout(subnavTimeout); 
     }); 
    }); 
}); 

我们都做不时，但是当你发现自己复制/粘贴一段代码，然后改变一个或两个字符串这将是最好的，而不是建立对付它的通用方法。

Answer 2

我知道你在做什么，我在这里告诉你，你这样做的方式是完全错误。我试图使用你的代码，但这不是一个可行的选择;取而代之的是我花了很长时间去做一个jsfiddle的例子，用一个“裸”的工作示例来说明如何使用jQuery实现下拉导航。

http://jsfiddle.net/kuroir/mkDKz/

调查一下。