本教程详细讲解如何使用jQuery和原生JavaScript实现多元素点击切换内容的互斥显示功能。我们将通过一个实际案例，演示如何点击一个图标时，不仅切换其自身状态并显示对应内容，还能同时隐藏其他所有已展开的内容，确保每次只有一个内容块处于可见状态，从而创建类似手风琴（Accordion）的效果。
概述与问题背景
在网页开发中，我们经常需要实现这样的交互：页面上有多个可点击的元素（例如图标、标题等），每个元素对应一段内容。当用户点击其中一个元素时，该元素的状态会发生变化（如图标旋转），并且其对应的内容会显示出来。同时，一个常见的需求是，当点击新的元素时，之前已打开的内容应该自动隐藏，以保证页面整洁和用户体验。
初始实现中，开发者可能遇到一个问题：点击图标时，所有内容都显示或隐藏，或者虽然能控制单个图标的内容显示，但无法实现“互斥”效果，即点击新的图标时，旧图标的内容不会自动关闭。本教程将重点解决这一互斥显示的问题。
HTML 结构
为了实现上述功能，我们需要一个清晰的HTML结构来组织图标和其对应的内容。每个可交互的单元应包含一个图标和一个内容区域，并用一个共同的父容器包裹起来，以便于JavaScript进行DOM遍历。
标题一
这是第一个图标对应的内容，点击图标可切换其显示状态。
标题三
这是第三个图标对应的内容，点击图标可切换其显示状态。
在这个结构中：
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代码组合起来，即可得到一个功能完整的互斥显示组件。
多元素点击互斥切换示例 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; /* 显示内容 */ }jQuery多元素互斥切换示例
$('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"); } }); 产品服务一
这是关于我们第一个产品服务的详细介绍。我们致力于提供高质量的解决方案，满足您的各种需求。
产品服务二
探索我们的第二个产品服务，它将帮助您优化工作流程，提升效率。立即体验，感受不同！
产品服务三
第三个产品服务专注于创新和用户体验。我们倾听您的声音，不断改进，为您带来最佳体验。
优化说明：在上述完整示例的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实现多元素点击切换及互斥显示教程的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1522130.html
微信扫一扫 
支付宝扫一扫 
