숨겨진 상자 CSS: 페이지 요소를 쉽게 숨기고 표시

웹 디자인에서 숨겨진 상자는 페이지 요소를 간단히 숨기고 표시하여 페이지의 상호 작용성과 조작성을 높일 수 있는 일반적으로 사용되는 CSS 기술입니다. 이 기사에서는 스타일 설정, 이벤트 바인딩 및 실제 적용을 포함하여 CSS를 사용하여 숨겨진 상자 효과를 얻는 방법을 소개합니다.

1. 스타일 설정

숨겨진 상자 효과를 얻으려면 먼저 숨겨진 상자 스타일을 정의해야 합니다. 아래와 같이 요소의 표시 속성을 없음으로 설정하여 요소를 숨길 수 있습니다.

.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 스타일을 추가합니다.

3. 실제 적용

실제 적용에서는 숨겨진 상자를 사용하여 드롭다운 메뉴, 접는 패널, 프롬프트 상자 등과 같은 몇 가지 일반적인 대화형 효과를 얻을 수 있습니다.

1. 드롭다운 메뉴

드롭다운 메뉴는 다양한 옵션을 표시하고 선택하는 데 사용할 수 있는 웹 디자인의 일반적인 구성 요소입니다. 드롭다운 메뉴 효과는 숨겨진 상자 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");
    }
};

위 코드는 사용자가 버튼을 클릭할 때 드롭다운 메뉴 버튼과 드롭다운 메뉴 옵션을 설정합니다. 드롭다운 메뉴 표시 여부를 결정하려면 표시되면 드롭다운 메뉴를 숨기고 숨겨지면 드롭다운 메뉴를 표시합니다.

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 기술은 웹 디자인에서 페이지 요소를 쉽게 숨기고 표시하며 페이지의 상호 작용성과 조작성을 향상시킬 수 있는 기술입니다. 이 글의 소개를 통해 우리는 히든박스의 구현 원리와 일반적인 적용 시나리오를 이해하고 사용자에게 더 나은 웹 디자인 경험을 제공하는 데 도움을 줄 수 있습니다.

위 내용은 숨겨진 상자 CSS: 페이지 요소를 쉽게 숨기고 표시의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!