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更改相应的类。

优点：这种方法仅添加了一个事件侦听器，并且您的代码大大减少了。

$(".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 2

您可以改用通用类，也可以使用popped从所有子菜单div中删除类.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>

Answer 3

第一步是在公共类上仅使用一个事件处理程序，而不是在每个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"的元素。

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

3 个答案: