CSSでクリック非表示表示を実装する方法

CSS Click to Hide Show

今日のインターネット時代では、Web デザインの焦点は、単純な静的表示から、より高度なインタラクティブなエクスペリエンスに移りました。その中でも、非表示と表示は最もよく使用されるインタラクション方法の 1 つであり、この方法により、ユーザーは必要な情報をより便利に取得できるようになり、ページ上の冗長なコンテンツを大幅に削減できます。 CSSには非表示・表示を行う方法がいくつかありますので、この記事では一つずつ紹介していきます。

1. 表示属性を使用する

CSS の表示属性の値は、要素を表示するか非表示にするかを制御します。値は次のとおりです。

• none: 要素はページから完全に削除され、レイアウトからは完全に見えなくなります。
• block: 要素はブロックレベルの要素として表示されます。つまり、行全体を占めます。
• inline: 要素はインライン要素として表示されます。つまり、テキストと同じスペースを占めます。
• inline-block: 要素はインライン要素として表示されますが、幅や高さなどの属性を設定できます。

display 属性を使用すると、要素の display 属性を追加または削除することで非表示と表示を行うことができます。サンプルコードは次のとおりです。

HTML コード:

<div class="box">
  <p>隐藏的内容</p>
</div>
<button id="toggle">显示/隐藏</button>

CSS コード:

.box {
  display: none;
}

JavaScript コード:

document.getElementById("toggle").addEventListener("click", function() {
  var box = document.querySelector(".box");
  if(box.style.display === "none") {
    box.style.display = "block";
  } else {
    box.style.display = "none";
  }
});

2. 不透明属性を使用する

不透明属性は、達成する要素の透明度を制御します。隠すか見せるかの効果。 opacity プロパティを 0 に設定すると、要素は完全に透明になり、見えなくなります。 opacity プロパティが 1 の場合、完全に表示されます。ただし、それでもページ上のスペースを占有します。

HTML コード:

<div class="box">
  <p>隐藏的内容</p>
</div>
<button id="toggle">显示/隐藏</button>

CSS コード:

.box {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  pointer-events: none;
}

.box.show {
  opacity: 1;
  pointer-events: auto;
}

JavaScript コード:

document.getElementById("toggle").addEventListener("click", function() {
  var box = document.querySelector(".box");
  box.classList.toggle("show");
});

3. 可視性属性を使用する

#visibility 属性は、要素を非表示にするかどうかを制御しますが、そのスペースはまだ保持されており、ページから要素を完全に削除するわけではありません。可視性プロパティが非表示に設定されている場合、要素は非表示になりますが、ページ上のスペースは引き続き占有されます。可視性プロパティが表示されている場合、完全に表示されます。

HTML コード:

<div class="box">
  <p>隐藏的内容</p>
</div>
<button id="toggle">显示/隐藏</button>

CSS コード:

.box {
  visibility: hidden;
}

.box.show {
  visibility: visible;
}

JavaScript コード:

document.getElementById("toggle").addEventListener("click", function() {
  var box = document.querySelector(".box");
  box.classList.toggle("show");
});

表示、不透明度、または可視性の属性をまとめると、非表示にすることも表示することもできます。これら 3 つの方法にはそれぞれ長所と短所があり、実際のニーズに応じて適切な方法を選択できます。

以上がCSSでクリック非表示表示を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。