CSS kotak tersembunyi: menyembunyikan dan menunjukkan elemen halaman dengan mudah

Dalam reka bentuk web, kotak tersembunyi ialah teknik CSS biasa yang hanya boleh menyembunyikan dan memaparkan elemen halaman untuk meningkatkan interaktiviti dan kebolehkendalian halaman. Dalam artikel ini, kami akan memperkenalkan cara menggunakan CSS untuk mencapai kesan kotak tersembunyi, termasuk tetapan gaya, pengikatan acara dan aplikasi praktikal.

1. Tetapan gaya

Untuk mencapai kesan kotak tersembunyi, anda perlu menentukan gaya kotak tersembunyi terlebih dahulu. Anda boleh menyembunyikan elemen dengan menetapkan atribut paparan elemen kepada tiada, seperti yang ditunjukkan di bawah:

.hidden{
    display: none;
}

Pada masa ini, elemen yang digunakan gaya ini akan disembunyikan dan tidak akan menduduki sebarang ruang pada halaman.

2. Pengikatan acara

Untuk memaparkan dan menyembunyikan kotak tersembunyi, kami perlu mengikat acara dengan elemen yang berkaitan. Acara yang biasa digunakan termasuk klik dan tuding.

1. acara klik

acara klik digunakan untuk bertindak balas kepada operasi klik tetikus pengguna. Apabila pengguna mengklik pada elemen tertentu, paparan atau penyembunyian elemen boleh dikawal melalui kod JS.

Kod HTML:

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

Kod CSS:

.hidden{
    display: none;
}

Kod 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");
    }
};

Kod di atas menetapkan butang dan A kotak tersembunyi. Apabila pengguna mengklik butang, kod JS digunakan untuk menentukan sama ada kotak tersembunyi disembunyikan, gaya .hidden akan dialih keluar dan kotak tersembunyi akan dipaparkan untuk menyembunyikan kotak tersembunyi.

2. acara tuding

acara tuding digunakan untuk bertindak balas kepada operasi tuding tetikus pengguna. Apabila pengguna melayang di atas elemen tertentu, paparan atau penyembunyian elemen boleh dikawal melalui kod JS.

Kod HTML:

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

Kod CSS:

.hidden{
    display: none;
}

Kod 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");
}

Kod di atas menyediakan bekas dan Untuk kotak tersembunyi, apabila pengguna menuding ke atas bekas, alih keluar gaya .hidden melalui kod JS dan paparkan kotak tersembunyi apabila tetikus keluar, tambah gaya .hidden untuk menyembunyikan kotak tersembunyi.

3. Aplikasi Praktikal

Dalam aplikasi praktikal, kotak tersembunyi boleh digunakan untuk mencapai beberapa kesan interaktif biasa, seperti menu lungsur, panel lipat, kotak gesaan, dsb.

1. Menu lungsur turun

Menu lungsur turun ialah komponen biasa dalam reka bentuk web dan boleh digunakan untuk memaparkan dan memilih pilihan yang berbeza. Kesan menu lungsur turun boleh dicapai dengan mudah menggunakan helah CSS kotak tersembunyi.

Kod 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>

Kod CSS:

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

Kod 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");
    }
};

Kod di atas menetapkan lungsur turun butang menu dan pilihan menu lungsur turun Apabila pengguna mengklik butang, kod JS digunakan untuk menentukan sama ada menu lungsur turun dipaparkan, menu lungsur turun disembunyikan, dan apabila disembunyikan, menu jatuh -menu bawah dipaparkan.

2. Panel Runtuh

Panel Runtuh boleh digunakan untuk memaparkan dan menyembunyikan berbilang blok kandungan untuk menjadikan halaman lebih kemas. Kesan panel yang runtuh boleh dicapai dengan mudah menggunakan helah CSS kotak tersembunyi.

Kod 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>

Kod CSS:

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

Kod 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");
        }
    }
}

Kod di atas menetapkan berbilang lipatan Item Panel , apabila pengguna mengklik tajuk panel, kod JS digunakan untuk menentukan sama ada kandungan panel dipaparkan Apabila dipaparkan, kandungan disembunyikan dan apabila disembunyikan, kandungan dipaparkan.

4. Ringkasan

Teknik CSS kotak tersembunyi ialah teknologi yang ringkas dan praktikal dalam reka bentuk web dengan mudah boleh menyembunyikan dan memaparkan elemen halaman serta meningkatkan interaktiviti dan kebolehkendalian halaman. Melalui pengenalan artikel ini, kami dapat memahami prinsip pelaksanaan dan senario aplikasi biasa kotak tersembunyi, dan membantu memberikan pengguna pengalaman reka bentuk web yang lebih baik.

Atas ialah kandungan terperinci CSS kotak tersembunyi: menyembunyikan dan menunjukkan elemen halaman dengan mudah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!