隠しボックス CSS: ページ要素を簡単に表示または非表示にします

Web デザインでは、隠しボックスは一般的に使用される CSS テクニックであり、ページ要素の非表示と表示を簡単に行うことで、ページの対話性と操作性を向上させることができます。この記事では、CSSを使って隠しボックス効果を実現する方法を、スタイル設定やイベントバインディング、実際の応用などを含めて紹介します。

1. スタイル設定

隠しボックスの効果を実現するには、まず隠しボックスのスタイルを定義する必要があります。以下に示すように、要素の表示属性を none に設定することで要素を非表示にできます。

.hidden{
    display: none;
}

現時点では、このスタイルが適用される要素は非表示になり、画面上のスペースを占有しません。ページ。

2. イベント バインディング

隠しボックスを表示または非表示にするには、イベントを関連要素にバインドする必要があります。一般的に使用されるイベントには、クリックとホバーが含まれます。

1. click イベント

click イベントは、ユーザーのマウス クリック操作に応答するために使用されます。ユーザーが特定の要素をクリックすると、JS コードを通じて要素の表示または非表示を制御できます。

HTML コード:

<button id="btn">显示/隐藏</button>
<div id="box" class="hidden">这是一个隐藏框</div>

CSS コード:

.hidden{
    display: none;
}

JS コード:

var btn = document.getElementById("btn");
var box = document.getElementById("box");
btn.onclick = function(){
    if(box.classList.contains("hidden")){
        box.classList.remove("hidden");
    } else{
        box.classList.add("hidden");
    }
};

上記のコードは、ボタンと隠しボックスを設定します。ボタンがクリックされると、JS コードを使用して、非表示ボックスが非表示かどうかが判断されます。非表示の場合は、.hidden スタイルが削除され、非表示ボックスが表示されます。そうでない場合は、.hidden スタイルが追加されて、非表示ボックスが非表示になります。箱。

2. hover イベント

hover イベントは、ユーザーのマウスホバー操作に応答するために使用されます。ユーザーが特定の要素の上にマウスを移動すると、その要素の表示または非表示を JS コードを通じて制御できます。

HTML コード:

<div id="box">鼠标悬停显示隐藏框</div>
<div id="hidden-box" class="hidden">这是一个隐藏框</div>

CSS コード:

.hidden{
    display: none;
}

JS コード:

var box = document.getElementById("box");
var hiddenBox = document.getElementById("hidden-box");
box.onmouseover = function(){
    hiddenBox.classList.remove("hidden");
}
box.onmouseout = function(){
    hiddenBox.classList.add("hidden");
}

上記のコードは、コンテナーと隠しボックスを設定します。コンテナー上にマウスを置くと、JS コードを通じて .hidden スタイルを削除して非表示のボックスを表示します。マウスを離したときに、.hidden スタイルを追加して非表示のボックスを非表示にします。

3. 実際のアプリケーション

実際のアプリケーションでは、隠しボックスを使用して、ドロップダウン メニュー、折りたたみパネル、プロンプト ボックスなどの一般的なインタラクティブ効果を実現できます。

1. ドロップダウン メニュー

ドロップダウン メニューは Web デザインの一般的なコンポーネントであり、さまざまなオプションを表示および選択するために使用できます。ドロップダウン メニューの効果は、隠しボックス CSS トリックを使用して簡単に実現できます。

HTML コード:

<div class="dropdown">
    <button class="dropdown-btn">点击显示下拉菜单</button>
    <div class="dropdown-menu hidden">
        <a href="#">选项1</a>
        <a href="#">选项2</a>
        <a href="#">选项3</a>
    </div>
</div>

CSS コード:

.hidden{
    display: none;
}
.dropdown-menu{
    position: absolute;
    background-color: #fff;
    border: 1px solid #ccc;
    padding: 5px;
}

JS コード:

var dropdownBtn = document.querySelector(".dropdown-btn");
var dropdownMenu = document.querySelector(".dropdown-menu");
dropdownBtn.onclick = function(){
    if(dropdownMenu.classList.contains("hidden")){
        dropdownMenu.classList.remove("hidden");
    } else{
        dropdownMenu.classList.add("hidden");
    }
};

上記のコードは、ドロップダウン メニュー ボタンとドロップダウン メニュー ボタンを設定します。ダウン メニュー オプションでは、ユーザーがボタンをクリックしたときに、JS コードを使用してドロップダウン メニューが表示されるかどうかを判断し、ドロップダウン メニューが表示されている場合は非表示にし、非表示の場合はドロップダウン メニューを表示します。

2. パネルを折りたたむ

パネルを折りたたむと、複数のコンテンツ ブロックの表示と非表示を切り替えてページを整理できます。折りたたまれたパネル効果は、隠しボックス CSS トリックを使用して簡単に実現できます。

HTML コード:

<div class="accordion">
    <div class="accordion-item">
        <div class="accordion-header">折叠面板1</div>
        <div class="accordion-content hidden">这是折叠面板1的内容</div>
    </div>
    <div class="accordion-item">
        <div class="accordion-header">折叠面板2</div>
        <div class="accordion-content hidden">这是折叠面板2的内容</div>
    </div>
    <div class="accordion-item">
        <div class="accordion-header">折叠面板3</div>
        <div class="accordion-content hidden">这是折叠面板3的内容</div>
    </div>
</div>

CSS コード:

.hidden{
    display: none;
}
.accordion-item{
    border: 1px solid #ccc;
    margin: 10px 0;
}
.accordion-header{
    background-color: #eee;
    padding: 5px;
}
.accordion-content{
    padding: 10px;
}

JS コード:

var accordionHeaders = document.querySelectorAll(".accordion-header");
var accordionContents = document.querySelectorAll(".accordion-content");
for(var i = 0; i < accordionHeaders.length; i++){
    accordionHeaders[i].onclick = function(){
        var content = this.nextElementSibling;
        if(content.classList.contains("hidden")){
            content.classList.remove("hidden");
        } else{
            content.classList.add("hidden");
        }
    }
}

上記のコードは、複数の折りたたみパネル項目を設定します。あるパネルのタイトルを決定し、パネルの内容を表示するかどうかをJSコードで判断し、表示する場合は内容を非表示にし、非表示にする場合は内容を表示します。

4. 概要

隠しボックス CSS 手法は、Web デザインにおけるシンプルで実用的な技術であり、ページ要素の表示と非表示を簡単に行い、ページの対話性と操作性を向上させることができます。この記事の導入により、隠しボックスの実装原理と一般的なアプリケーション シナリオを理解し、ユーザーにより良い Web デザイン エクスペリエンスを提供することができます。

以上が隠しボックス CSS: ページ要素を簡単に表示または非表示にしますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。