使用jQuery和CSS創建簡單的下拉菜單

Question

我在使用jQuery/css創建下拉菜單時遇到了麻煩。

現在每個類別的每一個下拉菜單是有一個隱藏的顯示，直到一類是徘徊在一個div。我試圖讓jquery顯示/隱藏懸停和mouseleave上正確的div。

我使用的邏輯是：顯示下拉如果任一類別鏈接或下拉菜單懸停菜單，否則隱藏在下拉菜單中。

更具體地說，我遇到的問題是下拉列表顯示，只要用戶將鼠標懸停在類別鏈接...它只要下拉DIV不徘徊關閉。我需要它關閉，如果下拉沒有徘徊或如果類別鏈接沒有徘徊......

現在第一個下拉菜單保持打開狀態，即使我將鼠標懸停在相鄰類別上，試圖查看鄰近的下拉菜單的類別，除非我首先將鼠標懸停在此下拉菜單上。

此外，每個格的下拉菜單下拉第一當用戶當用戶將鼠標懸停在下拉DIV，這使得它看起來車懸停在類別和試。

我知道這會少了很多代碼來實現:)請記住，我是很新的JQuery的。另外請記住，我想保留下拉菜單的DIV設置，我不使用列表。

這裏是我的jQuery代碼：

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $("#productsLink").hover(function(){ 
      $("#productsMenu").slideDown(); 
     }); 
     $("#productsLink, #productsMenu").hover(function(){ 
      $("#productsLink").css("color","red"); 
     }); 
     $("#productsMenu").mouseleave(function(){ 
      $("#productsLink").css('color', 'white'); 
      $("#productsMenu").slideUp(); 
     }); 
     $("#aboutLink").hover(function(){ 
      $("#aboutMenu").slideDown(); 
      $(this).css("color","red"); 
     }); 
     $("#aboutMenu").hover(function(){ 
      $("#aboutMenu").hide(); 
     }); 
     $("#aboutMenu").hover(function(){ 
      $("#aboutLink").css('color', 'red'); 
     }); 
     $("#aboutMenu").mouseleave(function(){ 
      $("#aboutLink").css('color', 'white'); 
     }); 
    }); 
    </script> 

Answer 1

這個問題少談你的JS和更多的標記。解決這個問題最簡單的方法是將你的菜單項和你的下拉列表放在一個div中的每個項目上，然後在特定的div上觸發你的懸停事件。

<div id="nav-item1"> 
     <a id="nav-link1">nav item</a> 
     <div id="dropdown1">Some Stuff</div> 
</div> 

這種方式只要在nav-item1 div中的某個部分懸停（鏈接或菜單），它將保持可見狀態。

有一些方法可以用jQuery來實現，但這是一個簡單的修復方法，它將使用更少的代碼。請牢記這些事件中的每一個都是分開的。這就是爲什麼你用雙動畫獲得奇怪的行爲。將鼠標懸停在鏈接上會觸發您的某個事件，將鼠標懸停在菜單上會觸發第二個事件。你可以用一些if語句來阻止它，但是不要讓它比自己更難。