JavSacriptを使用してCSSスタイルを元に戻さない

Question

JavaScriptの値に応じてCSSプロパティを前後に設定しようとしています。

クラス名 'menu'はページの読み込み時に非表示に設定されています。私はそれを目に見えるように設定するよう呼びかけます。しかし、私は再びそれを変更するためにそれを呼び出すと、それを隠してはいません。常に可視に設定されているように見えます。

let menu = document.querySelector('.menu'); 
if (menu.style.visibility = 'hidden') { 
    menu.style.visibility = 'visible'; 
    console.log('visible'); // always shows this. 
} else { 
    menu.style.visibility = 'hidden'; 
    console.log('hidden'); // doesn't get to here when .menu is visible. 
} 

私はそれが第1、第2なく行うことができます理由として混乱しています。私は他の特定を持っ試してみました：

else if (menu.style.visibility = 'visible') 

私もsetAttributeメソッドを使用してみましたが、それは常に同じ結果です。

私は前後に切り替えることができる必要があります。

Answer 1

が親切

if (menu.style.visibility == 'hidden') //change == 

Answer 2

あなたの条件条件の下に使用することは有効ではありません。あなたは実際にifステートメントの値を設定しています。

if (menu.style.visibility = 'hidden') // this sets the value 

それはこのようになります。

if (menu.style.visibility == 'hidden') // this compares the value 

Answer 3

比較するためのあなたの構文はJavaScriptで任意のフィールドを比較しながら、あなたが ==を使用する必要が間違っている

は、これだけの操作を行います。

JavaScriptで

if (menu.style.visibility == 'hidden') { 
    menu.style.visibility = 'visible'; 
    console.log('visible'); // always shows this. 
} else { 
menu.style.visibility == 'hidden'; 
console.log('hidden'); // doesn't get to here when .menu is visible. 
} 

Answer 4

で=を使用して値を割り当てますが、==を使用する場合は、何か他のものと等しいかどうかを確認しています。

let menu = document.querySelector('.menu'); 
 
if (menu.style.visibility == 'hidden') { 
 
    menu.style.visibility = 'visible'; 
 
    console.log('visible'); // always shows this. 
 
} else { 
 
    menu.style.visibility = 'hidden'; 
 
    console.log('hidden'); // doesn't get to here when .menu is visible. 
 
}

Answer 5

エラーがあなたのif文です。したがって、単一の等価を二重の等価に変更すると、コードが機能します！

よう

場合（menu.style.visibility == '隠された'）私はこれがあなたの質問に答えることを願っています

！

Answer 6

このコードは、ページ上のdivの表示を切り替えます。

function togglediv(){ 
 
    var div = document.getElementById("menu"); 
 
    div.style.display = div.style.display == "none" ? "block" : "none"; 
 
}

<button onclick="togglediv('menu')">Toggle div</button> 
 
     <div id="menu">div</div>