隱藏css-made下拉菜單

Question

我已經用css創建了一個下拉菜單。下面是HTML代碼：

<li class="menu" id="menu"> 
    <div class="dropdown">  
    <div class="col1"> ... 

這裏是CSS：

.dropdown { 
    visibility:hidden; 
    /*...*/ 
} 

#menu li:hover .dropdown{ 
    visibility:visible; 
} 

這完美的作品。在jQuery中，我處理這個菜單中鏈接的click事件，並且我想用jQuery來隱藏下拉菜單，只要用戶點擊一個鏈接，它就會消失。 我想這兩者（注：我沒有用過這些結合在一起。）：

$('.dropdown').css('visibility', 'hidden'); //didn't work 

$('.dropdown').hide(); //didn't work either 

他們都隱藏菜單，但問題是，當他們隱藏它，每當我懸停我不要再拿到菜單將鼠標懸停在項目上。

Answer 1

好的，實際發生的情況是，當你在元素上設置$('.dropdown').css('visibility', 'hidden');時，它會將此內容添加到元素的樣式屬性，內聯（可以使用Firebug檢查此屬性）。所以CSS

#menu li:hover .dropdown{ 
    visibility:visible; 
} 

沒有任何作用，因爲內聯樣式優先。 .dropdown現在將始終將元素設置爲hidden。

Answer 2

您必須定義當鼠標懸停按鈕時會發生什麼，當鼠標懸停時會發生什麼。事情是這樣的：

jQuery(document).ready(function(){ 
    jQuery(".dropdown").hover(function() { 
     /* hovering actions */ 
    }, function() { 
     /* non-hovering functions */ 
    }); 
}); 

Answer 3

這是因爲jQuery的隱藏（）方法使用規則「顯示：無」在那elemenent，在這種情況下，「.dropdown」，將其隱藏，因此，根據定義，「知名度「不能在具有分配給它的規則」display：none「的元素上工作。

使用jQuery製作下拉效果而不是一堆CSS規則。