CSS de boîte cachée : masquer et afficher facilement les éléments de la page

Dans la conception Web, les boîtes cachées sont une technique CSS couramment utilisée qui peut simplement masquer et afficher des éléments de page pour augmenter l'interactivité et l'opérabilité de la page. Dans cet article, nous présenterons comment utiliser CSS pour obtenir l'effet de boîte cachée, y compris le paramètre de style, la liaison d'événements et l'application pratique.

1. Paramètres de style

Pour obtenir l'effet de boîte cachée, vous devez d'abord définir un style de boîte cachée. Vous pouvez masquer l'élément en définissant l'attribut display de l'élément sur none, comme indiqué ci-dessous :

.hidden{
    display: none;
}

A ce moment, l'élément auquel ce style est appliqué sera masqué et n'occupera aucun espace sur la page.

2. Liaison d'événements

Afin d'afficher et de masquer la boîte cachée, nous devons lier les événements aux éléments associés. Les événements couramment utilisés incluent le clic et le survol.

1. événement click

événementclick est utilisé pour répondre à l'opération de clic de souris de l'utilisateur. Lorsque l'utilisateur clique sur un élément spécifique, l'affichage ou le masquage de l'élément peut être contrôlé via le code JS.

Code HTML :

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

Code CSS :

.hidden{
    display: none;
}

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

Le code ci-dessus définit un bouton et une boîte masquée Lorsque l'utilisateur clique sur le bouton, le code JS est utilisé pour déterminer si la boîte cachée est. caché. S'il est masqué, supprimez le style .hidden et affichez la boîte cachée ; sinon, ajoutez le style .hidden et masquez la boîte cachée.

2. événement hover

l'événement hover est utilisé pour répondre à l'opération de survol de la souris de l'utilisateur. Lorsque l'utilisateur survole un élément spécifique, l'affichage ou le masquage de l'élément peut être contrôlé via le code JS.

Code HTML :

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

Code CSS :

.hidden{
    display: none;
}

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

Le code ci-dessus configure un conteneur et une boîte cachée Lorsque l'utilisateur survole le conteneur, le style .hidden est supprimé via le code JS. . Afficher la boîte cachée ; lorsque la souris quitte, ajoutez le style .hidden pour masquer la boîte cachée.

3. Application pratique

Dans les applications réelles, les boîtes cachées peuvent être utilisées pour obtenir certains effets interactifs courants, tels que des menus déroulants, des panneaux pliables, des boîtes d'invite, etc.

1. Menu déroulant

Le menu déroulant est un composant courant dans la conception Web et peut être utilisé pour afficher et sélectionner différentes options. L'effet de menu déroulant peut être facilement obtenu en utilisant l'astuce CSS de la boîte cachée.

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

Code CSS :

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

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

Le code ci-dessus définit un bouton de menu déroulant et une option de menu déroulant Lorsque l'utilisateur clique sur le bouton, le code JS est utilisé. pour déterminer si le menu déroulant est affiché. Masquer le menu déroulant lorsqu'il est affiché et afficher le menu déroulant lorsqu'il est masqué.

2. Panneau de réduction

Le panneau de réduction peut être utilisé pour afficher et masquer plusieurs blocs de contenu afin de rendre la page plus ordonnée. Un effet de panneau réduit peut être facilement obtenu en utilisant l'astuce CSS de la boîte cachée.

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

Code CSS :

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

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

Le code ci-dessus définit plusieurs éléments de panneau pliable Lorsque l'utilisateur clique sur le titre d'un panneau, le code JS est utilisé pour déterminer si le contenu du panneau. s'affiche. Masquer le contenu lors de l'affichage et afficher le contenu lors du masquage.

4. Résumé

La technique CSS de la boîte cachée est une technologie simple et pratique dans la conception Web. Elle peut facilement masquer et afficher des éléments de page et améliorer l'interactivité et l'opérabilité de la page. Grâce à l'introduction de cet article, nous pouvons comprendre les principes de mise en œuvre et les scénarios d'application courants des boîtes cachées, et contribuer à offrir aux utilisateurs une meilleure expérience de conception Web.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!