JavaScript悬停功能的子菜单

Question

我很新，试图了解JavaScript，我一直在试图找出我做错了什么，但无法让这个工作正常的多个例子。有一次我使用onmouseover/mouseout，但它只能在1个菜单上工作。

我敢肯定，这是简单的，我忽略了，但任何帮助，将不胜感激。

http://jsfiddle.net/N3TyT/

jQuery(document).ready(function($) { 
$('#top-menu').hover(
    function() { 
    $('#submenu').show(active); 
    }, 
    function() { 
    $('#submenu').hide(non-active); 
    } 
); 
}); 

<ul id="menu" class="nav-menu"> 
    <li>Home</li> 
    <li id="top-menu"><a href="#">About Us</a> 
    </li> 
    <ul id="submenu" class="sub-menu non-active"> 
     <li>US</li> 
     <li>Our Style</li> 
     <li>The Experience</li> 
    </ul> 
    <li id="top-menu"><a href="#">Galleries</a> 
    </li> 
    <ul id="submenu" class="sub-menu non-active"> 
     <li>Weddings</li> 
     <li>Engagements</li> 
     <li>Featured Weddings</li> 
    </ul> 
    <li id="top-menu"><a href="#">The Details</a> 
    </li> 
    <ul id="submenu" class="sub-menu non-active"> 
     <li>Investment</li> 
     <li>Press and Awards</li> 
     <li>Testimonials</li> 
    </ul> 
    <li>FAQ</li> 
    <li>Contact</li> 
    <li>The Blog</li> 
</ul> 

.nav-menu { 
    list-style-type:none; 
    text-align:center; 
    text-transform:uppercase; 
    font-weight:bold; 
    font: 24px'Playfair Display', Georgia, serif; 
} 
.navmenu ul li { 
    margin:30px; 
} 
.non-active { 
    display:none; 
} 
.active { 
    display:inline; 
} 

Answer 1

您使用隐藏和显示错误。 http://api.jquery.com/show/ ​​

http://jsfiddle.net/eXKV9/

$('#top-menu').hover(
    function() { 
    $('#submenu').show(); 
    }, 
    function() { 
    $('#submenu').hide(); 
    } 
); 

Answer 2

id必须唯一。如果你有多个元素使用相同的id，那么当你执行$（'＃top-menu'）时，jquery将不会检索所有元素，它只会找到匹配选择器的第一个元素。

Answer 3

我更新了你的工作。这是什么试图建立？

$('#top-menu').mouseover(function(){ 
    $('#submenu').addClass('active'); 
}); 
$('#top-menu').mouseout(function(){ 
    $('#submenu').removeClass('active'); 
}); 

JSFiddle Demo

Answer 4

它不会回答你的具体问题，但可以用CSS来轻松实现相同的行为。这样你就不会依赖JavaScript来打开标准的菜单访问。

http://jsfiddle.net/EmcPY

HTML

<ul class="menu"> 
    <li><a href="#">Home</a></li> 
    <li> 
     <a href="#">Galleries</a> 

     <ul> 
      <li>Gallery #1</li> 
      <li>Gallery #2</li> 
     </ul> 
    </li> 
    <li> 
     <a href="#">Albums</a> 

     <ul> 
      <li>Album #1</li> 
      <li>Album #2</li> 
     </ul> 
    </li> 
</ul> 

CSS

ul.menu li ul { 
    display:none; 
} 

ul.menu li:hover ul { 
    display:block; 
    position:relative; 
} 

Answer 5

我们将需要更改HTML一点。 ID仅在页面上使用一次。类是相似的，但可以应用于任何数量的元素。我们也想在顶层菜单下嵌套我们的子菜单。这样的协会更清晰。

<li class="top-menu"><a href="#">About Us</a> 
    <ul class="sub-menu non-active"> 
     <li>Ashley + David</li> 
     <li>Our Style</li> 
     <li>The Experience</li> 
    </ul> 
</li> 

我们想指定要显示或隐藏的嵌套子菜单。 $(this)指的是悬停的顶层菜单。

$('.top-menu').hover(
    function() { 
    $(this).find('.sub-menu').show("slow"); 
    }, 
    function() { 
    $(this).find('.sub-menu').hide("slow"); 
    } 
); 

demo