概述与问题背景
在网页开发中，我们经常需要实现这样的交互：页面上有多个可点击的元素（例如图标、标题等），每个元素对应一段内容。当用户点击其中一个元素时，该元素的状态会发生变化（如图标旋转），并且其对应的内容会显示出来。同时，一个常见的需求是，当点击新的元素时，之前已打开的内容应该自动隐藏，以保证页面整洁和用户体验。
初始实现中，开发者可能遇到一个问题：点击图标时，所有内容都显示或隐藏，或者虽然能控制单个图标的内容显示，但无法实现“互斥”效果，即点击新的图标时，旧图标的内容不会自动关闭。本教程将重点解决这一互斥显示的问题。
HTML 结构
为了实现上述功能，我们需要一个清晰的HTML结构来组织图标和其对应的内容。每个可交互的单元应包含一个图标和一个内容区域，并用一个共同的父容器包裹起来，以便于JavaScript进行DOM遍历。
标题一
这是第一个图标对应的内容，点击图标可切换其显示状态。
标题三
这是第三个图标对应的内容，点击图标可切换其显示状态。
在这个结构中：
作为所有交互单元的外部容器。 - 是每个独立的交互单元的容器，它包含一个图标和其内容。是实际可点击的图标区域，它内部包含了图标的线条元素 (icon-line1_product, icon-line2_product) 和对应的文本内容 (txt-content)。是需要显示或隐藏的文本内容。
CSS 样式
CSS 主要用于定义图标的初始状态、点击后的变化以及内容的显示/隐藏样式。
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代码组合起来，即可得到一个功能完整的互斥显示组件。
多元素点击互斥切换示例 jQuery多元素互斥切换示例
产品服务一
这是关于我们第一个产品服务的详细介绍。我们致力于提供高质量的解决方案，满足您的各种需求。
产品服务二
探索我们的第二个产品服务，它将帮助您优化工作流程，提升效率。立即体验，感受不同！
产品服务三
第三个产品服务专注于创新和用户体验。我们倾听您的声音，不断改进，为您带来最佳体验。
优化说明： 在上述完整示例的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实现多元素点击时的互斥显示效果，这在构建手风琴、
