css展开收起功能 |如何导入css

首先，大家需要使用HTML创建一个基础框架。代码如下：

<div class="wrapper">
<div class="header">
<h2>标题</h2>
<button class="btn-toggle">展开/收起</button>
</div>
<div class="content">
<p>内容</p>
</div>
</div>

接下来，大家可以使用CSS来实现展开/收起的功能。首先，大家需要把内容的高度设置为0，然后使用:hover伪类和transition属性来实现鼠标滑过时的动画效果。代码如下：

.wrapper .content {
height: 0;
overflow: hidden;
transition: height 0.3s ease-in-out;
}
.wrapper:hover .content {
height: 100px;
}

在上面的代码中，大家将.wrapper .content的高度设置为0，并使用overflow: hidden来隐藏内容。然后，当.wrapper被:hover时，大家将.wrapper .content的高度设置为100px，并使用transition属性来实现展开/收起的动画效果。

最后，大家需要添加一个按钮，让用户可以点击展开/收起内容。代码如下：

.wrapper .btn-toggle {
display: block;
margin: 10px auto;
padding: 5px;
border: none;
background-color: #ccc;
cursor: pointer;
}
.wrapper .btn-toggle:hover {
background-color: #aaa;
}
.wrapper .btn-toggle:before {
content: "展开";
}
.wrapper:hover .btn-toggle:before {
content: "收起";
}

在上面的代码中，大家创建了一个.btn-toggle按钮，并使用:before伪类在按钮上添加文字。然后，当.wrapper被:hover时，大家修改btn-toggle的文字为“收起”。当用户点击按钮时，大家需要使用JavaScript来切换内容的展开/收起状态。代码如下：

var btnToggle = document.querySelector('.btn-toggle');
var content = document.querySelector('.content');
btnToggle.addEventListener('click', function() {
if (content.classList.contains('active')) {
content.classList.remove('active');
content.style.height = 0;
} else {
content.classList.add('active');
content.style.height = '100px';
}
});

在上面的代码中，大家使用querySelector方法获取.btn-toggle和.content元素，并在按钮上添加点击事件。当用户点击按钮时，大家判断.content元素是否带有active类。如果没有，说明内容处于收起状态，则大家将.active类添加到.content元素，并将其高度设置为100px。如果已经带有active类，说明内容处于展开状态，则大家将.active类从.content元素中删除，并将其高度设置为0。

到此，大家已经成功地实现了展开/收起功能。使用CSS和JavaScript的结合可以方便地实现许多实用的功能，在将来的开发中也可以多加尝试使用。