スパンドロップダウンがドロップダウンメニューがドロップダウンするが、それはもう消えないのjQuery

Question

はJavaScript

function myFunction() { 
    if ($(".x-span-drop-menu").css("display", "none")) { 
     $(".x-span-drop-menu").css("display", "block"); 
    } else { 
     $(".x-span-drop-menu").css("display", "none"); 
    } 
} 

を選択します。私はJsの中でのjQuery に書き込むので、それはあなたがCSSプロパティを設定しているif状態で$(".x-span-drop-menu").css("display", "none")を使用して

Answer 1

を動作し、機能が再び要素を見えるようにされ、その真のブロックが実行されるtruthy値を返しますです 。

function myFunction() { 
    var span = $(".x-span-drop-menu"); 
    if (span.css("display") == "none") { 
     span.css("display", "block"); 
    } else { 
     span.css("display", "none"); 
    } 
} 

私はあなたが既にjQueryのを使用しているとして、toggleのような機能を使用するのは簡単かもしれ.is()

function myFunction() { 
    var span = $(".x-span-drop-menu"); 
    if (span.is(":visible") == false) { 
     span.css("display", "block"); 
    } else { 
     span.css("display", "none"); 
    } 
} 

Answer 2

とともに:visibleを使用することをお勧めします：

$(".x-span-drop-menu").toggle(display); 

は等価です〜へ：

if (display === true) { 
    $(".x-span-drop-menu").show(); 
} else if (display === false) { 
    $(".x-span-drop-menu").hide(); 
} 

Answer 3

表示と非表示の切り替え機能を使用します。そのシンプルな

$(".x-span-drop-menu").toggle(); 

Answer 4

スタイルでis-hiddenのようなCSSクラスを切り替えることが良いでしょう：

.is-hidden { 
    display: none; 
} 

、結果として、あなたがなる機能：

function toggleFunc() { 
    $(".x-span-drop-menu").toggleClass('is-hidden'); 
} 

を