html 横向 折叠代码
导读:HTML 横向折叠是一种常见的页面设计效果,它可以使页面更加美观和易于浏览。下面我们将介绍如何在 HTML 中实现横向折叠效果。<style>.fold-btn {display: inline-block;padding: 8...
HTML 横向折叠是一种常见的页面设计效果,它可以使页面更加美观和易于浏览。下面我们将介绍如何在 HTML 中实现横向折叠效果。
style>
.fold-btn {
display: inline-block;
padding: 8px 16px;
background-color: #eee;
border-radius: 4px;
cursor: pointer;
}
.fold-content {
display: none;
}
.fold-content.show {
display: block;
}
/style>
div>
div class="fold-btn" onclick="toggleFold()">
展开/收起/div>
div class="fold-content">
p>
这里是折叠内容 1。/p>
p>
这里是折叠内容 2。/p>
p>
这里是折叠内容 3。/p>
/div>
/div>
script>
function toggleFold() {
var content = document.querySelector('.fold-content');
content.classList.toggle('show');
}
/script>
以上是一个简单的横向折叠代码实现,其中,使用了 CSS 的 display 属性来控制折叠内容是否显示,用 JavaScript 监听按钮点击事件,并切换显示状态。
声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!
若转载请注明出处: html 横向 折叠代码
本文地址: https://pptw.com/jishu/302869.html
