JavaScript 左右展开收起

在Web开发中，左右展开收起是一个常见的交互效果，通过点击按钮或者其他元素，实现左右内容的展开和收起。在本文中，我们将介绍如何使用JavaScript来实现这一效果，并给出代码示例。

原理介绍

左右展开收起的原理其实很简单，通过改变左右内容的显示状态来实现展开和收起效果。在点击展开按钮时，左侧内容展开显示，右侧内容收起隐藏；在点击收起按钮时，左侧内容收起隐藏，右侧内容展开显示。

实现步骤

  1. 创建HTML结构，包括左右内容和展开收起按钮。
  2. 使用CSS设置左右内容的样式，初始状态为收起。
  3. 使用JavaScript监听按钮的点击事件，改变左右内容的显示状态。

代码示例

HTML

<div class="container">
    <div class="left-content">
        <!-- 左侧内容 -->
    </div>
    <div class="right-content">
        <!-- 右侧内容 -->
    </div>
    <button id="toggle-btn">展开/收起</button>
</div>

CSS

.left-content, .right-content {
    display: none;
}

.left-content.active, .right-content.active {
    display: block;
}

JavaScript

const toggleBtn = document.getElementById('toggle-btn');
const leftContent = document.querySelector('.left-content');
const rightContent = document.querySelector('.right-content');

toggleBtn.addEventListener('click', () => {
    leftContent.classList.toggle('active');
    rightContent.classList.toggle('active');
});

状态图

stateDiagram
    leftContent --> rightContent: 展开
    rightContent --> leftContent: 收起

关系图

erDiagram
    LEFT_CONTENT {
        int id
        varchar content
    }
    RIGHT_CONTENT {
        int id
        varchar content
    }
    TOGGLE_BTN {
        int id
        varchar text
    }
    LEFT_CONTENT ||--|{ RIGHT_CONTENT : "展开/收起"

结尾

通过以上代码示例，我们可以实现一个简单的左右展开收起效果。这种交互方式可以帮助用户更好地浏览和展示内容，提升用户体验。希望本文对您有所帮助，谢谢阅读！