时间戳

首页 > 解决方案 > 以更简洁的方式编写此单击以隐藏/显示 jQuery 的想法

javascript - 以更简洁的方式编写此单击以隐藏/显示 jQuery 的想法

问题描述

我有一个基于单击另一个 div 来隐藏/显示的 div 列表。现在，它相当混乱，因为每次添加新 div 时我都必须复制大量代码。我正在寻找有关如何清理它的建议。也许使用数据属性而不是文字 ID 来简化事情？

我的 HTML：

<div aria-labelledby="dropdownMenuFilters" class="dropdown-menu dropdown-menu-right dropdownMenuFilters p-0 show" x-placement="bottom-end" style="position: absolute; transform: translate3d(-106px, 56px, 0px); top: 0px; left: 0px; will-change: transform;">
<ul class="list-unstyled m-4 bg-white">
    <li id="schoolsProgramsFilter" class="py-1">Schools &amp; Programs</li>
    <li id="difficultyFilter" class="py-1">Admission Difficulty</li>
    <li id="gpaFilter" class="py-1">GPA</li>
    <li id="satFilter" class="py-1">SAT</li>
    <li id="actFilter" class="py-1">ACT</li>
    <li id="sizeFilter" class="py-1">School Size</li>
    <li id="settingFilter" class="py-1">Setting</li>
</ul>
<div id="schoolsProgramsFilterSub" class="openSubMenu p-4 rounded">
    ... content ...
</div>
<div id="difficultyFilterSub" class="openSubMenu p-4 rounded">
    ... content ...
</div>
<div id="gpaFilterSub" class="openSubMenu p-4 rounded">
    ... content ...
</div>
<div id="satFilterSub" class="openSubMenu p-4 rounded">
    ... content ...
</div>
<div id="actFilterSub" class="openSubMenu p-4 rounded">
    ... content ...
</div>
<div id="sizeFilterSub" class="openSubMenu p-4 rounded">
   ... content ...
</div>
<div id="settingFilterSub" class="openSubMenu p-4 rounded">
    ... content ...
</div>

我的查询：

$("#schoolsProgramsFilter").click(function () {
        if($(".openSubMenu").hasClass("popped")) {
            $(".openSubMenu").removeClass("popped");
        }
        $("#schoolsProgramsFilterSub").toggleClass("popped");
    });

    $("#difficultyFilter").click(function () {
        if($(".openSubMenu").hasClass("popped")) {
            $(".openSubMenu").removeClass("popped");
        }
        $("#difficultyFilterSub").toggleClass("popped");
    });

    $("#gpaFilter").click(function () {
        if($(".openSubMenu").hasClass("popped")) {
            $(".openSubMenu").removeClass("popped");
        }
        $("#gpaFilterSub").toggleClass("popped");
    });

    $("#satFilter").click(function () {
        if($(".openSubMenu").hasClass("popped")) {
            $(".openSubMenu").removeClass("popped");
        }
        $("#satFilterSub").toggleClass("popped");
    });

    $("#actFilter").click(function () {
        if($(".openSubMenu").hasClass("popped")) {
            $(".openSubMenu").removeClass("popped");
        }
        $("#actFilterSub").toggleClass("popped");
    });

    $("#sizeFilter").click(function () {
        if($(".dropdownMenuFilters ul li").hasClass("active")) {
            $(".dropdownMenuFilters ul li").removeClass("active");
        }
        $(this).toggleClass("active");
        if($(".openSubMenu").hasClass("popped")) {
            $(".openSubMenu").removeClass("popped");
        }
        $("#sizeFilterSub").toggleClass("popped");
    });

    $("#settingFilter").click(function () {
        if($(".openSubMenu").hasClass("popped")) {
            $(".openSubMenu").removeClass("popped");
        }
        $("#settingFilterSub").toggleClass("popped");
    });

标签： javascriptjquery

解决方案

您可以在父级上添加单击侦听器并利用事件冒泡。单击子元素时，您将获得它的 id，您可以使用它来更改适当的类。

优点：这种方法只增加了一个事件监听器，你的代码大大减少了。

$(".list-styled").click(function (e) {
    if($(`#${e.target.id} .openSubMenu`).hasClass("popped")) {
        $(`#${e.target.id} .openSubMenu`).removeClass("popped");
    }
    $(`#${e.target.id}Sub`).toggleClass("popped");
});

推荐阅读