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