Verstecktes Box-CSS: Seitenelemente einfach ein- und ausblenden

Im Webdesign sind versteckte Boxen eine häufig verwendete CSS-Technik, mit der Seitenelemente einfach ausgeblendet und angezeigt werden können, um die Interaktivität und Bedienbarkeit der Seite zu erhöhen. In diesem Artikel stellen wir vor, wie Sie mit CSS den Hidden-Box-Effekt erzielen, einschließlich Stileinstellungen, Ereignisbindung und praktischer Anwendung.

1. Stileinstellung

Um den Hidden-Box-Effekt zu erzielen, müssen Sie zunächst einen Hidden-Box-Stil definieren. Sie können das Element ausblenden, indem Sie das Anzeigeattribut des Elements auf „Keine“ setzen, wie unten gezeigt:

.hidden{
    display: none;
}

Zu diesem Zeitpunkt wird das Element, auf das dieser Stil angewendet wird, ausgeblendet und nimmt keinen Platz auf der Seite ein.

2. Ereignisbindung

Um das versteckte Feld anzuzeigen und auszublenden, müssen wir Ereignisse an verwandte Elemente binden. Zu den häufig verwendeten Ereignissen gehören Klicken und Hovern.

1. Klickereignis

Klickereignis wird verwendet, um auf den Mausklickvorgang des Benutzers zu reagieren. Wenn der Benutzer auf ein bestimmtes Element klickt, kann die Anzeige oder Ausblendung des Elements über JS-Code gesteuert werden.

HTML-Code:

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

CSS-Code:

.hidden{
    display: none;
}

JS-Code:

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

Der obige Code legt eine Schaltfläche und ein verstecktes Feld fest. Wenn der Benutzer auf die Schaltfläche klickt, wird der JS-Code verwendet, um festzustellen, ob das versteckte Feld vorhanden ist Wenn es ausgeblendet ist, entfernen Sie den .hidden-Stil und zeigen Sie das ausgeblendete Feld an. Andernfalls fügen Sie den .hidden-Stil hinzu und blenden das ausgeblendete Feld aus.

2. Hover-Ereignis

Hover-Ereignis wird verwendet, um auf die Mausbewegung des Benutzers zu reagieren. Wenn der Benutzer mit der Maus über ein bestimmtes Element fährt, kann die Anzeige oder das Ausblenden des Elements über JS-Code gesteuert werden.

HTML-Code:

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

CSS-Code:

.hidden{
    display: none;
}

JS-Code:

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

Der obige Code richtet einen Container und ein verstecktes Feld ein. Wenn der Benutzer mit der Maus über den Container fährt, wird der .hidden-Stil durch den JS-Code entfernt . Das ausgeblendete Feld anzeigen. Wenn die Maus geht, fügen Sie den Stil .hidden hinzu, um das ausgeblendete Feld auszublenden.

3. Praktische Anwendung

In tatsächlichen Anwendungen können versteckte Felder verwendet werden, um einige gängige interaktive Effekte zu erzielen, z. B. Dropdown-Menüs, Faltfelder, Eingabeaufforderungsfelder usw.

1. Dropdown-Menü

Das Dropdown-Menü ist eine häufige Komponente im Webdesign, mit der verschiedene Optionen angezeigt und ausgewählt werden können. Der Dropdown-Menüeffekt lässt sich ganz einfach mit dem CSS-Trick „Hidden Box“ erzielen.

HTML-Code:

<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-Code:

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

JS-Code:

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

Der obige Code legt eine Dropdown-Menüschaltfläche und eine Dropdown-Menüoption fest. Wenn der Benutzer auf die Schaltfläche klickt, wird der JS-Code verwendet um zu bestimmen, ob das Dropdown-Menü angezeigt wird. Blenden Sie das Dropdown-Menü aus, wenn es angezeigt wird, und zeigen Sie das Dropdown-Menü an, wenn es ausgeblendet ist.

2. Collapse Panel

Collapse Panel kann verwendet werden, um mehrere Inhaltsblöcke anzuzeigen und auszublenden, um die Seite aufgeräumter zu gestalten. Der Effekt des minimierten Bedienfelds lässt sich leicht mit dem CSS-Trick „Hidden Box“ erzielen.

HTML-Code:

<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-Code:

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

JS-Code:

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

Der obige Code legt mehrere Faltpanel-Elemente fest. Wenn der Benutzer auf den Titel eines Panels klickt, wird der JS-Code verwendet, um zu bestimmen, ob der Panel-Inhalt wird angezeigt. Inhalte ausblenden, wenn sie angezeigt werden, und Inhalte anzeigen, wenn sie ausgeblendet werden.

4. Zusammenfassung

Die Hidden-Box-CSS-Technik ist eine einfache und praktische Technologie im Webdesign. Sie kann Seitenelemente einfach ausblenden und anzeigen und die Interaktivität und Bedienbarkeit der Seite verbessern. Durch die Einführung dieses Artikels können wir die Implementierungsprinzipien und allgemeinen Anwendungsszenarien versteckter Boxen verstehen und dazu beitragen, Benutzern ein besseres Webdesign-Erlebnis zu bieten.

Das obige ist der detaillierte Inhalt vonVerstecktes Box-CSS: Seitenelemente einfach ein- und ausblenden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!