关于编写此单击以隐藏/显示jQuery的更简洁方法的想法

Question

根据另一个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>

​

我的JQUERY：

$("#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");
    });

Answer 1

第一步是只对公共类使用一个事件处理程序，而不是在每个ID上使用一个事件处理程序。

然后您可以获取id并将"Sub"追加到其中以选择相应的元素.

$(".py-1").click(function () {
    var id = $(this).attr("id");
    $(".openSubMenu").removeClass("popped");
    $("#" + id + "Sub").addClass("popped");
});

或者，如果您不想依赖于连接ID(这样您就可以更改ID而不用担心破坏它们)，您可以使用data属性.

<div id="schoolsProgramsFilterSub" ... data-for="schoolsProgramsFilter">

$(".py-1").click(function () {
    var id = $(this).attr("id");
    $(".openSubMenu").removeClass("popped");
    $("[data-for=" + id + "]").addClass("popped");
});

此方法将获取单击元素的ID，并查找具有相应data-for属性的元素。

例如，使用id="schoolsProgramsFilter"单击元素将显示其上有data-for="schoolsProgramsFilter"的任何元素。

Answer 2

您可以在父事件和使用事件冒泡时添加单个单击侦听器。当单击子元素时，您将获得它的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");
});

Answer 3

您可以使用公共类代替，您可以从所有子菜单div中删除类popped，但不需要使用.not(the_current)这样的实际单击元素：

$(".openSubMenu").not(sub_menu).removeClass("popped");

然后，您可以使用以下方法简单地切换类：

sub_menu.toggleClass("popped");

​

$(".py-1").click(function() {
  var sub_menu = $('#' + this.id + 'Sub');

  $(".openSubMenu").not(sub_menu).removeClass("popped");
  sub_menu.toggleClass("popped");
});

.p-4 {
  display: none;
}

.popped {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div aria-labelledby="dropdownMenuFilters" class="dropdown-menu dropdown-menu-right dropdownMenuFilters p-0 show" x-placement="bottom-end">
  <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 ...1
  </div>
  <div id="difficultyFilterSub" class="openSubMenu p-4 rounded">
    ... content ...2
  </div>
  <div id="gpaFilterSub" class="openSubMenu p-4 rounded">
    ... content ...3
  </div>
  <div id="satFilterSub" class="openSubMenu p-4 rounded">
    ... content ...4
  </div>
  <div id="actFilterSub" class="openSubMenu p-4 rounded">
    ... content ...5
  </div>
  <div id="sizeFilterSub" class="openSubMenu p-4 rounded">
    ... content ...6
  </div>
  <div id="settingFilterSub" class="openSubMenu p-4 rounded">
    ... content ...7
  </div>

​