Jquery/CSS子菜單

我想讓我的菜單在行之間顯示一個隱藏的菜單。我不想要一個純CSS的菜單。請我意識到這可以用較少的標記來完成，並且它缺少很多。這只是剪切和粘貼，重新創建。Jquery/CSS子菜單

下面是HTML：

<nav> 
<div class="navigation_toplevel"> 
    <a href="Index"><h4>Home</h4></a> 
</div> 

<div class="navigation_toplevel has_sub"> 
    <a href="Index"><h4>Home</h4></a> 
</div> 
<div class="navigation_bottomlevel"> 
    <ul> 
     <li>Preferences</li> 
     <li>Preferences</li> 
     <li>Preferences</li> 
    </ul> 
</div> 
<div class="navigation_toplevel has_sub"> 
    <a href="Index"><h4>Home</h4></a> 
</div> 
<div class="navigation_bottomlevel"> 
    <ul> 
     <li>Preferences</li> 
     <li>Preferences</li> 
     <li>Preferences</li> 
    </ul> 
</div> 
<div class="navigation_toplevel has_sub"> 
    <a href="Index"><h4>Home</h4></a> 
</div> 
<div class="navigation_bottomlevel"> 
    <ul> 
     <li>Preferences</li> 
     <li>Preferences</li> 
     <li>Preferences</li> 
    </ul> 
</div> 
<div class="navigation_toplevel has_sub"> 
    <a href="Index"><h4>Home</h4></a> 
</div> 
<div class="navigation_bottomlevel"> 
    <ul> 
     <li>Preferences</li> 
     <li>Preferences</li> 
     <li>Preferences</li> 
    </ul> 
</div> 
<div class="navigation_toplevel has_sub"> 
    <a href="Index"><h4>Home</h4></a> 
</div> 
<div class="navigation_bottomlevel"> 
    <ul> 
     <li>Preferences</li> 
     <li>Preferences</li> 
     <li>Preferences</li> 
    </ul> 
</div> 
</nav>

，因爲這個菜單需要完全流體我已經設定，這種方式（如果windoes小的可能是每行1,2或3個鏈接）並能夠在下方水平顯示子菜單，填充導航容器。

我的Jquery：

<script> 
$(document).ready(function() { 


    if ($(".navigation_toplevel").hasClass("has_sub")) { 
     $(this).hover(function() { 
      $(".navigation_toplevel").nextAll("div:first").toggleClass("show_sub"); 
     }); 
      } 

      else { } 
     }); 

</script>

我在做什麼錯在這裏？

來源

2013-09-23 Mark

好吧，$(".navigation_toplevel")返回一個集合。當您按類名獲得元素時，使用集合的正確方法是$(".navigation_toplevel").each(function(){ do something with a single element })。但在你的情況下，我認爲你需要這樣的代碼：$(".navigation_toplevel.has_sub").hover(mouseInHandler, mouseOutHandler)

來源

2013-09-23 19:39:47

Jquery/CSS子菜單

回答

相關問題