jquery 横向手风琴效果

基础概念

jQuery 横向手风琴效果是一种网页交互设计，通过点击不同的标签或按钮，展示或隐藏相应的内容区域。这种效果通常用于导航菜单、产品展示、图片轮播等场景。

类型

点击展开/收起：点击某个标签时，展开相应的内容区域，同时收起其他内容区域。
滑动展开/收起：点击标签时，内容区域以滑动的方式展开或收起。
自动播放：可以设置自动播放功能，定时切换不同的内容区域。

应用场景

导航菜单：用于网站的导航菜单，点击不同的菜单项展开相应的子菜单。
产品展示：用于展示多个产品，点击不同的产品标签展示详细信息。
图片轮播：用于图片轮播，点击不同的图片标签切换到相应的图片。

示例代码

以下是一个简单的 jQuery 横向手风琴效果的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery 横向手风琴效果</title>
    <style>
        .accordion {
            display: flex;
            overflow: hidden;
        }
        .accordion-item {
            flex: 1;
            transition: flex 0.3s ease;
        }
        .accordion-item.active {
            flex: 3;
        }
        .accordion-content {
            display: none;
        }
        .accordion-content.active {
            display: block;
        }
    </style>
</head>
<body>
    <div class="accordion">
        <div class="accordion-item">
            <button class="accordion-btn">标签1</button>
            <div class="accordion-content">内容1</div>
        </div>
        <div class="accordion-item">
            <button class="accordion-btn">标签2</button>
            <div class="accordion-content">内容2</div>
        </div>
        <div class="accordion-item">
            <button class="accordion-btn">标签3</button>
            <div class="accordion-content">内容3</div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $('.accordion-btn').click(function() {
                var $this = $(this);
                var $item = $this.parent();
                var $content = $item.find('.accordion-content');

                $('.accordion-item').removeClass('active');
                $('.accordion-content').removeClass('active');

                if (!$item.hasClass('active')) {
                    $item.addClass('active');
                    $content.addClass('active');
                }
            });
        });
    </script>
</body>
</html>