jqueryフォーススタイルのCSSファイル

Question

div内にdivがあります。ドロップメニューのように機能します。 私の問題は#two divをクリックしたときです。私は消えたいです。

jqueryを使用しました。私は.hide()または.slideUp()を使用しました。

いずれかを使用した場合、#oneの上にマウスを置こうとしましたが、もう一度表示されません。

私は理由を調べました。私はstyle="display:none"としてdiv＃2にjquery add属性を見つけました。 cssはそれを上書きしません。

と、もし私がcss：display: block !important;に追加した場合。 jqueryはクリックされたとき＃2回隠れることはありません。

これまでの中間点は何ですか？私が＃2を隠すクラスを再起動すると、うまくいきません。まだマウスの上にマウスがあるからです。

<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とcss）を選択し、それに固執する。

あなたを削除します。ここでは

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

が必要なJSです：ここでは

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

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

は作業フィドルです：https://jsfiddle.net/q27tu1cg/