表示/非表示ボタンを最初にダブルクリックする必要があるのはなぜですか?

表示/非表示ボタンのダブルクリックの問題のトラブルシューティング

表示/非表示ボタンのコードで、ユーザーがダブルクリックする必要があるという異常な問題が発生すると述べました。要素がすでに非表示になっている場合でも、最初の試行でボタンをクリックします。これを解決するために、考えられる原因を調べて解決策を提供しましょう。

現在のコードは、style.display プロパティを利用して要素の表示/非表示を切り替えます。 style.display プロパティは、「none」または「block」のいずれかに設定できます。要素が最初に作成されたとき、その style.display プロパティは空の場合がありますが、これは JavaScript によって「none」として解釈されます。その結果、ボタンが初めてクリックされると、最初に要素が非表示になり (x.style.display === "none" がチェックされるため)、次に要素が表示されるため (条件が次のとおり)、ダブルクリックしたように見えます。

この問題を解決し、最初のクリックで要素が表示されるようにするには、x.style.display が "none" または空の文字列 ("") であるかどうかを確認できます。変更されたコードは次のとおりです。

function showhidemenu() {
  var x = document.getElementById("menu");
  if (x.style.display === "none" || x.style.display === "") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

この更新された条件により、x.style.display が空の場合、最初のクリックでダブルクリックしなくても要素が正しく表示されます。

以上が表示/非表示ボタンを最初にダブルクリックする必要があるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。