掌握jQuery实现多状态按钮的互斥切换：点击展开，其他自动关闭-js教程-PHP中文网

掌握jQuery实现多状态按钮的互斥切换：点击展开，其他自动关闭

本教程详细讲解如何使用jQuery实现一组互动元素（如按钮）的互斥状态切换。当一个元素被点击并激活其“展开”状态时，其他同组元素将自动恢复到“关闭”状态，确保界面始终保持清晰和一致，尤其适用于轮播图或手风琴等场景。

场景描述与初始实现

在现代web界面中，我们经常会遇到需要管理一组相似交互元素状态的场景，例如在一个轮播图或手风琴组件中，点击一个按钮使其展开时，其他已展开的按钮应自动关闭。这种“点击一个，关闭其他”的互斥行为对于提升用户体验至关重要。

我们以一个可变形的按钮为例，该按钮通过添加或移除特定的CSS类来切换“关闭”和“打开”两种状态。

HTML 结构:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
    <div id="main-content_product">
        <div class="icon_product">
            <div class="icon-line1_product test"></div>
            <div class="icon-line2_product test"></div>
        </div>
    </div>

    <div id="main-content_product">
        <div class="icon_product">
            <div class="icon-line1_product test"></div>
            <div class="icon-line2_product test"></div>
        </div>
    </div>

    <div id="main-content_product">
        <div class="icon_product">
            <div class="icon-line1_product test"></div>
            <div class="icon-line2_product test"></div>
        </div>
    </div>

    <div id="main-content_product">
        <div class="icon_product">
            <div class="icon-line1_product test"></div>
            <div class="icon-line2_product test"></div>
        </div>
    </div>
</section>

登录后复制

CSS 样式:

以下CSS定义了按钮的基本样式以及其内部线条在change_icon-product类存在时的转换效果，从而实现“打开”状态的视觉变化。

.icon_product {
    display: 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 类时，线条进行旋转和位移 */
.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(-45deg, 0px);
}

登录后复制

初始 JavaScript 逻辑:

最初的JavaScript代码仅负责切换当前点击按钮的类。

$('body').on('click', '.icon_product', function () {
    // 检查是否包含类，然后进行切换或移除，这里的逻辑可以简化
    if (this.classList.contains("icon_product")) { // 这里的条件判断实际上是多余的，因为事件委托已经确保了元素拥有此class
        $(this).toggleClass("change_icon-product");
    } else {
        $(this).removeClass("change_icon-product");
    }
});

登录后复制

这段代码的局限性在于，它只关注当前被点击的.icon_product元素。当页面上存在多个这样的按钮时，点击其中一个使其“打开”后，再点击另一个，前一个按钮并不会自动“关闭”，导致多个按钮同时处于“打开”状态，这与我们的互斥需求不符。

实现互斥切换的解决方案

为了实现“点击一个，关闭其他”的互斥行为，我们需要在切换当前点击按钮状态的同时，找到其所有同级元素中的其他按钮，并将它们强制恢复到“关闭”状态（即移除change_icon-product类）。jQuery提供了强大的DOM遍历方法，可以轻松实现这一目标。

Rustic AI

AI驱动的创意设计平台

108

查看详情

核心思路:

切换当前点击按钮的change_icon-product类。
找到当前点击按钮的父元素。
找到父元素的所有同级元素。
在这些同级元素中查找所有的.icon_product按钮。
从这些查找到的按钮中移除change_icon-product类。

优化后的 JavaScript 代码:

$('body').on('click', '.icon_product', function() {
  // 1. 切换当前点击按钮的状态
  $(this).toggleClass("change_icon-product");

  // 2. 找到当前按钮的父元素，然后找到父元素的所有同级元素
  // 3. 在这些同级元素中查找所有的 .icon_product 按钮
  // 4. 从这些查找到的按钮中移除 "change_icon-product" 类
  $(this).parent().siblings().find('.icon_product').removeClass("change_icon-product");
});

登录后复制

代码解释:

$(this).toggleClass("change_icon-product");: 这行代码保持不变，它负责在当前被点击的.icon_product元素上添加或移除change_icon-product类，从而切换其视觉状态。
$(this).parent(): $(this)代表当前被点击的.icon_product元素。parent()方法向上遍历DOM树，找到它的直接父元素，即div#main-content_product。
.siblings(): siblings()方法用于获取当前元素的所有同级元素。在这里，它会找到除当前按钮的父元素（div#main-content_product）之外的所有其他div#main-content_product元素。
.find('.icon_product'): find()方法在当前jQuery对象（即所有其他div#main-content_product元素）的后代中查找所有匹配.icon_product选择器的元素。这样我们就得到了所有其他按钮。
.removeClass("change_icon-product");: 最后，removeClass()方法从所有查找到的其他按钮中移除change_icon-product类，确保它们都恢复到“关闭”状态。

通过这种方式，我们确保了在任何给定时刻，只有被点击的按钮可能处于“打开”状态，而其他同组按钮则保持“关闭”状态。

完整示例代码

将所有部分整合，以下是实现互斥状态切换的完整代码：

<!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 {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-color: #f4f4f4;
            margin: 0;
        }
        section {
            display: flex;
            gap: 20px; /* 增加按钮之间的间距 */
            flex-wrap: wrap; /* 允许按钮换行 */
        }
        #main-content_product {
            border: 1px solid #ccc;
            padding: 10px;
            background-color: #fff;
            border-radius: 8px;
        }

        .icon_product {
            display: block;
            cursor: pointer;
            position: relative;
            padding: 15px;
            margin-top: 0px;
            /* background-color: lightblue; /* 方便查看点击区域 */
        }

        .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);
        }
    </style>
</head>
<body>
    <section>
        <div id="main-content_product">
            <div class="icon_product">
                <div class="icon-line1_product test"></div>
                <div class="icon-line2_product test"></div>
            </div>
        </div>

        <div id="main-content_product">
            <div class="icon_product">
                <div class="icon-line1_product test"></div>
                <div class="icon-line2_product test"></div>
            </div>
        </div>

        <div id="main-content_product">
            <div class="icon_product">
                <div class="icon-line1_product test"></div>
                <div class="icon-line2_product test"></div>
            </div>
        </div>

        <div id="main-content_product">
            <div class="icon_product">
                <div class="icon-line1_product test"></div>
                <div class="icon-line2_product test"></div>
            </div>
        </div>
    </section>

    <script>
        $(document).ready(function() {
            $('body').on('click', '.icon_product', function() {
                // 切换当前点击按钮的状态
                $(this).toggleClass("change_icon-product");

                // 找到当前按钮的父元素，然后找到父元素的所有同级元素
                // 在这些同级元素中查找所有的 .icon_product 按钮
                // 从这些查找到的按钮中移除 "change_icon-product" 类
                $(this).parent().siblings().find('.icon_product').removeClass("change_icon-product");
            });
        });
    </script>
</body>
</html>

登录后复制

注意事项

HTML id 属性的唯一性: 在提供的HTML结构中，id="main-content_product"被重复使用了多次。根据HTML规范，id属性在整个文档中必须是唯一的。虽然在当前jQuery的parent().siblings().find()链式操作下，这种重复并不会直接导致功能失效（因为jQuery会正确地通过元素关系而非id的唯一性来遍历），但从最佳实践和避免潜在问题的角度来看，强烈建议将这些id更改为类（class="main-content_product_wrapper"）或使用唯一的id（例如id="main-content_product_1", id="main-content_product_2"等）。
选择器与DOM结构: 解决方案依赖于特定的DOM结构（.icon_product是#main-content_product的直接子元素，且所有#main-content_product是<section>的直接子元素）。如果DOM结构发生变化，例如.icon_product嵌套更深，或者其父元素与同级元素的关系不同，则需要调整jQuery选择器链。
性能考量: 对于页面上数量极多的交互元素（例如成千上万个），频繁地使用siblings().find()进行DOM遍历和操作可能会带来一定的性能开销。但在大多数常见的UI场景中（几十到几百个元素），这种开销通常可以忽略不计。
事件委托: $('body').on('click', '.icon_product', function() { ... }); 是一种良好的事件委托实践。它将事件监听器绑定到body元素上，通过事件冒泡机制捕获.icon_product元素的点击事件。这不仅减少了内存占用（只绑定一个监听器），而且对于动态添加到DOM中的.icon_product元素也能正常工作。

总结

通过本教程，我们学习了如何利用jQuery的DOM遍历方法（parent(), siblings(), find()）和类操作方法（toggleClass(), removeClass()）来高效地实现多元素状态的互斥切换。这种模式在构建各种交互式Web组件时非常实用，它能够确保用户界面在复杂交互下依然保持逻辑清晰和视觉一致性。理解并掌握这种技巧，将有助于开发者创建更健壮、用户体验更佳的Web应用。

以上就是掌握jQuery实现多状态按钮的互斥切换：点击展开，其他自动关闭的详细内容，更多请关注php中文网其它相关文章！