jQuery与JavaScript实现多元素点击切换及互斥显示教程-js教程-PHP中文网

jQuery与JavaScript实现多元素点击切换及互斥显示教程

本教程详细讲解如何使用jQuery和原生JavaScript实现多元素点击切换内容的互斥显示功能。我们将通过一个实际案例，演示如何点击一个图标时，不仅切换其自身状态并显示对应内容，还能同时隐藏其他所有已展开的内容，确保每次只有一个内容块处于可见状态，从而创建类似手风琴（Accordion）的效果。

概述与问题背景

在网页开发中，我们经常需要实现这样的交互：页面上有多个可点击的元素（例如图标、标题等），每个元素对应一段内容。当用户点击其中一个元素时，该元素的状态会发生变化（如图标旋转），并且其对应的内容会显示出来。同时，一个常见的需求是，当点击新的元素时，之前已打开的内容应该自动隐藏，以保证页面整洁和用户体验。

初始实现中，开发者可能遇到一个问题：点击图标时，所有内容都显示或隐藏，或者虽然能控制单个图标的内容显示，但无法实现“互斥”效果，即点击新的图标时，旧图标的内容不会自动关闭。本教程将重点解决这一互斥显示的问题。

HTML 结构

为了实现上述功能，我们需要一个清晰的HTML结构来组织图标和其对应的内容。每个可交互的单元应包含一个图标和一个内容区域，并用一个共同的父容器包裹起来，以便于JavaScript进行DOM遍历。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
    <!-- 第一个可交互单元 -->
    <div class="main-content_product">
        <div class="icon_product">
            <div class="icon-line1_product test"></div>
            <div class="icon-line2_product test"></div>
            <div class="txt-content">
                <h3>标题一</h3>
                <p>这是第一个图标对应的内容，点击图标可切换其显示状态。</p>
            </div>
        </div>
    </div>

    <!-- 第二个可交互单元 -->
    <div class="main-content_product">
        <div class="icon_product">
            <div class="icon-line1_product test"></div>
            <div class="icon-line2_product test"></div>
            <div class="txt-content">
                <h3>标题二</h3>
                <p>这是第二个图标对应的内容，点击图标可切换其显示状态。</p>
            </div>
        </div>
    </div>

    <!-- 第三个可交互单元 -->
    <div class="main-content_product">
        <div class="icon_product">
            <div class="icon-line1_product test"></div>
            <div class="icon-line2_product test"></div>
            <div class="txt-content">
                <h3>标题三</h3>
                <p>这是第三个图标对应的内容，点击图标可切换其显示状态。</p>
            </div>
        </div>
    </div>
</section>

登录后复制

在这个结构中：

<section> 作为所有交互单元的外部容器。
<div class="main-content_product"> 是每个独立的交互单元的容器，它包含一个图标和其内容。
<div class="icon_product"> 是实际可点击的图标区域，它内部包含了图标的线条元素 (icon-line1_product, icon-line2_product) 和对应的文本内容 (txt-content)。
<div class="txt-content"> 是需要显示或隐藏的文本内容。

CSS 样式

CSS 主要用于定义图标的初始状态、点击后的变化以及内容的显示/隐藏样式。

立即学习“Java免费学习笔记（深入）”；

body {
  background: transparent; /* 根据需要调整背景 */
  color: #fcbe24; /* 文本颜色 */
  padding: 0 24px;
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.icon_product {
    display: inline-block;
    cursor: pointer;
    position: relative;
    padding: 15px;
    margin-top: 0px;
}

.icon-line1_product,
.icon-line2_product {
    width: 35px;
    height: 5px;
    background-color: #f00; /* 图标线条颜色 */
    margin: 6px 0;
    border-radius: 10px;
    transition: all 0.6s ease-in-out; /* 平滑过渡效果 */
    -webkit-transition: all 0.6s ease-in-out;
    -moz-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out;
    -ms-transition: all 0.6s ease-in-out;
}

.icon-line2_product {
    transform: rotate(90deg) translate(-11px, 0px); /* 初始状态下第二条线旋转 */
    -webkit-transform: rotate(90deg) translate(-11px, 0px);
    -moz-transform: rotate(90deg) translate(-11px, 0px);
    -o-transform: rotate(90deg) translate(-11px, 0px);
    -ms-transform: rotate(90deg) translate(-11px, 0px);
}

/* 点击后图标的变化样式 */
.change_icon-product .icon-line1_product {
    transform: rotate(45deg) translate(8px, 0px);
    -webkit-transform: rotate(45deg) translate(8px, 0px);
    -moz-transform: rotate(45deg) translate(8px, 0px);
    -o-transform: rotate(45deg) translate(8px, 0px);
    -ms-transform: rotate(45deg) translate(8px, 0px);
}

.change_icon-product .icon-line2_product {
    transform: rotate(-45deg) translate(8px, 0px);
    -webkit-transform: rotate(-45deg) translate(8px, 0px);
    -moz-transform: rotate(-45deg) translate(8px, 0px);
    -o-transform: rotate(-45deg) translate(8px, 0px);
    -ms-transform: rotate(-45deg) translate(8px, 0px);
}

/* 内容的初始隐藏和显示样式 */
.txt-content {
    display: none; /* 默认隐藏 */
}

.Toggle_txt-content {
    display: block; /* 显示内容 */
}

登录后复制

关键CSS类：

.icon_product: 定义了图标容器的基本样式。
.change_icon-product: 当这个类被添加到 .icon_product 上时，会触发图标线条的旋转动画，使其看起来像一个“X”或“关闭”符号。
.txt-content: 默认 display: none;，隐藏内容。
.Toggle_txt-content: 当这个类被添加到 .txt-content 上时，会将其 display 设置为 block，从而显示内容。

JavaScript/jQuery 实现

为了实现互斥显示，我们需要在点击事件处理函数中做两件事情：

芦笋演示

一键出成片的录屏演示软件，专为制作产品演示、教学课程和使用教程而设计。

查看详情

关闭所有其他已打开的项：移除其他图标的 change_icon-product 类和其内容的 Toggle_txt-content 类。
切换当前点击项的状态：切换当前点击图标的 change_icon-product 类和其内容的 Toggle_txt-content 类。

以下是实现这一逻辑的jQuery代码：

$('body').on('click', '.icon_product', function() {
    // 获取当前点击的图标元素
    const $currentIcon = $(this);

    // 1. 关闭所有其他已打开的项
    // 找到当前图标的父元素（.main-content_product），然后找到其所有兄弟元素
    // 在这些兄弟元素中，查找所有的 .icon_product，并移除其 "change_icon-product" 类
    $currentIcon.parent().siblings().find('.icon_product').removeClass("change_icon-product");
    // 在这些兄弟元素中，查找所有的 .txt-content，并移除其 "Toggle_txt-content" 类（隐藏内容）
    $currentIcon.parent().siblings().find('.txt-content').removeClass("Toggle_txt-content");

    // 2. 切换当前点击项的状态
    // 切换当前图标的视觉变化类
    $currentIcon.toggleClass("change_icon-product");
    // 切换当前图标对应内容的显示/隐藏类
    $currentIcon.find(".txt-content").toggleClass("Toggle_txt-content");
});

登录后复制

代码解析：

$('body').on('click', '.icon_product', function() { ... });：使用事件委托，监听 body 内所有 .icon_product 元素的点击事件。这对于动态添加的元素也有效。
const $currentIcon = $(this);：缓存当前被点击的 .icon_product 元素，方便后续操作。
$currentIcon.parent().siblings().find('.icon_product').removeClass("change_icon-product");
- $currentIcon.parent()：获取当前点击图标的直接父元素，即 .main-content_product。
- .siblings()：获取这个父元素的所有同级兄弟元素（即其他 .main-content_product 容器）。
- .find('.icon_product')：在这些兄弟容器内部查找所有的 .icon_product 元素。
- .removeClass("change_icon-product")：移除这些兄弟图标上的 change_icon-product 类，使其恢复初始状态。
$currentIcon.parent().siblings().find('.txt-content').removeClass("Toggle_txt-content");
- 这行代码与上一行类似，只是 find() 的目标变成了 .txt-content。
- 它会移除所有兄弟容器内内容的 Toggle_txt-content 类，从而隐藏所有其他已展开的内容。这是实现互斥显示的关键一步。
$currentIcon.toggleClass("change_icon-product");：切换当前点击图标的 change_icon-product 类。如果存在就移除，如果不存在就添加。
$currentIcon.find(".txt-content").toggleClass("Toggle_txt-content");：在当前点击的图标内部查找 .txt-content，并切换其 Toggle_txt-content 类，从而显示或隐藏当前图标对应的内容。

通过这种顺序，我们首先确保所有其他项都被关闭，然后再处理当前点击项的切换，从而实现了完美的互斥显示效果。

完整示例

将上述HTML、CSS和JavaScript代码组合起来，即可得到一个功能完整的互斥显示组件。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多元素点击互斥切换示例</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <style>
        body {
            background: #282c34; /* 深色背景 */
            color: #f0f0f0; /* 亮色文本 */
            padding: 20px;
            margin: 0;
            display: flex;
            flex-direction: column; /* 垂直排列 */
            align-items: center;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
            min-height: 100vh;
        }

        section {
            display: flex;
            flex-direction: column;
            gap: 20px; /* 元素间距 */
            width: 80%;
            max-width: 600px;
            margin-top: 50px;
        }

        .main-content_product {
            background-color: #3a3f4b;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            overflow: hidden; /* 确保内容隐藏时不会溢出 */
        }

        .icon_product {
            display: flex; /* 使用flex布局使图标和内容垂直排列 */
            flex-direction: column;
            cursor: pointer;
            padding: 15px 20px;
            position: relative;
            background-color: #444b58;
            border-bottom: 1px solid #555;
        }

        .icon_product h3 {
            margin-top: 0;
            margin-bottom: 10px;
            color: #fcbe24;
        }

        .icon-line1_product,
        .icon-line2_product {
            width: 35px;
            height: 5px;
            background-color: #f00; /* 图标线条颜色 */
            margin: 6px 0;
            border-radius: 10px;
            transition: all 0.6s ease-in-out;
            -webkit-transition: all 0.6s ease-in-out;
            -moz-transition: all 0.6s ease-in-out;
            -o-transition: all 0.6s ease-in-out;
            -ms-transition: all 0.6s ease-in-out;
        }

        .icon-line2_product {
            transform: rotate(90deg) translate(-11px, 0px);
            -webkit-transform: rotate(90deg) translate(-11px, 0px);
            -moz-transform: rotate(90deg) translate(-11px, 0px);
            -o-transform: rotate(90deg) translate(-11px, 0px);
            -ms-transform: rotate(90deg) translate(-11px, 0px);
        }

        .change_icon-product .icon-line1_product {
            transform: rotate(45deg) translate(8px, 0px);
            -webkit-transform: rotate(45deg) translate(8px, 0px);
            -moz-transform: rotate(45deg) translate(8px, 0px);
            -o-transform: rotate(45deg) translate(8px, 0px);
            -ms-transform: rotate(45deg) translate(8px, 0px);
        }

        .change_icon-product .icon-line2_product {
            transform: rotate(-45deg) translate(8px, 0px);
            -webkit-transform: rotate(-45deg) translate(8px, 0px);
            -moz-transform: rotate(-45deg) translate(8px, 0px);
            -o-transform: rotate(-45deg) translate(8px, 0px);
            -ms-transform: rotate(-45deg) translate(-8px, 0px); /* 修正translate */
        }

        .txt-content {
            display: none; /* 默认隐藏 */
            padding: 15px 20px;
            color: #f0f0f0;
            background-color: #3a3f4b;
            border-top: 1px solid #555;
        }

        .Toggle_txt-content {
            display: block; /* 显示内容 */
        }
    </style>
</head>
<body>
    <h1>jQuery多元素互斥切换示例</h1>
    <section>
        <div class="main-content_product">
            <div class="icon_product">
                <div class="icon-line1_product"></div>
                <div class="icon-line2_product"></div>
                <div class="txt-content">
                    <h3>产品服务一</h3>
                    <p>
                        这是关于我们第一个产品服务的详细介绍。我们致力于提供高质量的解决方案，满足您的各种需求。
                    </p>
                </div>
            </div>
        </div>

        <div class="main-content_product">
            <div class="icon_product">
                <div class="icon-line1_product"></div>
                <div class="icon-line2_product"></div>
                <div class="txt-content">
                    <h3>产品服务二</h3>
                    <p>
                        探索我们的第二个产品服务，它将帮助您优化工作流程，提升效率。立即体验，感受不同！
                    </p>
                </div>
            </div>
        </div>

        <div class="main-content_product">
            <div class="icon_product">
                <div class="icon-line1_product"></div>
                <div class="icon-line2_product"></div>
                <div class="txt-content">
                    <h3>产品服务三</h3>
                    <p>
                        第三个产品服务专注于创新和用户体验。我们倾听您的声音，不断改进，为您带来最佳体验。
                    </p>
                </div>
            </div>
        </div>
    </section>

    <script>
        $('body').on('click', '.icon_product', function() {
            const $currentIcon = $(this);

            // 如果当前点击的图标已经处于激活状态（内容已展开），则只关闭它
            if ($currentIcon.hasClass("change_icon-product")) {
                $currentIcon.removeClass("change_icon-product");
                $currentIcon.find(".txt-content").removeClass("Toggle_txt-content");
            } else {
                // 1. 关闭所有其他已打开的项
                $currentIcon.parent().siblings().find('.icon_product').removeClass("change_icon-product");
                $currentIcon.parent().siblings().find('.txt-content').removeClass("Toggle_txt-content");

                // 2. 切换当前点击项的状态
                $currentIcon.addClass("change_icon-product");
                $currentIcon.find(".txt-content").addClass("Toggle_txt-content");
            }
        });
    </script>
</body>
</html>

登录后复制

优化说明： 在上述完整示例的JavaScript代码中，我们对逻辑进行了微调，以更好地处理“点击已打开项再次关闭”的情况。

if ($currentIcon.hasClass("change_icon-product"))：在切换前判断当前图标是否已经处于激活状态。
如果已激活，则只移除其激活类和内容显示类，实现关闭效果。
如果未激活，则先关闭所有其他项，再激活当前项。这种处理方式使得用户可以点击已打开的图标来关闭它，而不是必须点击另一个图标才能关闭。

注意事项与总结

DOM 结构的重要性：正确的HTML结构是实现高效jQuery遍历的基础。parent(), siblings(), find() 等方法依赖于清晰的父子和兄弟关系。
事件委托：使用 $('body').on('click', '.selector', function(){...}) 是一种良好的实践，尤其当元素是动态加载时。它只在 body 上绑定一个事件监听器，提高了性能。
类名管理：通过添加/移除CSS类来控制元素的视觉状态和显示/隐藏是常见的做法，它将行为与样式分离，使代码更易维护。
性能考虑：对于页面上数量极多的交互元素，频繁的DOM遍历可能会有轻微的性能开销。但在大多数常见场景下，这种方法是完全可接受的。如果性能成为瓶颈，可以考虑更优化的DOM缓存或原生JavaScript实现。
可访问性：对于此类交互，应考虑添加ARIA属性（如 aria-expanded）以提升屏幕阅读器用户的体验。

通过本教程，您应该能够掌握如何使用jQuery实现多元素点击时的互斥显示效果，这在构建手风琴、

以上就是jQuery与JavaScript实现多元素点击切换及互斥显示教程的详细内容，更多请关注php中文网其它相关文章！