jQuery的力量風格在css文件

Question

我有一個div內的div ..工作更像一個下拉菜單。 我的問題是當我點擊#two股利。我想消失。

所以我用jquery。我用.hide()或.slideUp()。

但是當它們中的任何一個被使用後，我試着將鼠標懸停在#one上，#two再也不會出現了？

我查了原因。我發現jquery添加屬性div＃二作爲style="display:none"。和CSS不會覆蓋。

如果我在css中添加：到display: block !important;。點擊時jquery不會隱藏#two。

這是什麼中間地帶。如果我重新觸發了隱藏＃2的類，它將無法工作。因爲鼠標仍然在#one。

<div id="one"> 
    <span>Main</span> 
    <div id="two">Sub</div> 
</div> 

CSS將是：

#one{ 
    position: relative; 
} 

#two { 
    display: none; 
    position: absolute; 
    width: 100%; 
    top: 100%; 
    left: 0; 
} 

#one:hover #two { 
    display: block; 
} 

Answer 1

我覺得你不好你的鏈接JS行動。另外最好的做法是不要混合使用.show()和.hide()與CSS中的顯示。選擇你的解決方案（js vs css）並堅持下去。

刪除您：

#one:hover #two { 
    display: block; 
} 

這是必要的JS：

$('#one span').click(function(){ 
    $('#two').show(); 
}) 

$('#two').click(function(){ 
    $('#two').hide(); 
}); 

這裏是工作提琴：https://jsfiddle.net/q27tu1cg/