html 横向 折叠代码

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核实处理，我们将尽快回复您，谢谢合作！