javascript - 如何使用不同的选择器简化重复的 jQuery 代码

Question

所以我有数百个列表，它们被分为 30 多个类别。

我所做的是让列表显示:无，因为每个类别都有一个 click.slideToggle() 函数，并且还可以滑动除单击的列表之外的其他列表，问题是我必须为每个类别编写重复的很长的代码列表。

我需要有人建议我更好的方法来编写这些 javascript 行，所以这里是更清晰的图片的代码。

<span id='categoryA'>
<div id='listA' class='list'>

<span id='categoryB'>
<div id='listB' class='list'>

<span id='categoryC'>
<div id='listC' class='list'>

<span id='categoryD'>
<div id='listD' class='list'>

<!-- there are around 25 more of similar lists -->

CSS:

.list {
    display: none;
}

JavaScript:

$(document).ready(function() {
  $("#categoryA").click(function() {
    $("#listA").slideToggle(function() {
      $("#listB,#listC,#listD").slideUp();
    });
  });

   $("#categoryB").click(function() {
    $("#listB").slideToggle(function() {
      $("#listA,#listC,#listD").slideUp();
    });
  });

   $("#categoryC").click(function() {
    $("#listC").slideToggle(function() {
      $("#listA,#listB,#listD").slideUp();
    });
  }); 

   $("#categoryD").click(function() {
    $("#listD").slideToggle(function() {
      $("#listA,#listB,#listC").slideUp();
    });
  });
});

重点是我希望每次单击#categoryA时，它都会滑动切换#listA，如果我单击#categoryB，它SlideToggle #listB 和 SlideUp 当前处于 SlideDown 的任何其他列表。

我有超过 30 个类别。如何让代码更简单、更高效？有没有人有更聪明的方法来做到这一点？

Answer 1

<span class='category' id='categoryA'>Title A</span>
<div id='listA' class='list'>...</div>

<span class='category' id='categoryB'>Title B</span>
<div id='listB' class='list'>...</div>

<span class='category' id='categoryC'>Title C</span>
<div id='listC' class='list'>...</div>

<span class='category' id='categoryD'>Title D</span>
<div id='listD' class='list'>...</div>

和

$(function() {
    $(document).on("click", ".category", function () {
        $(this).next(".list").slideToggle(function () {
            $(".list").not(this).slideUp();
        };
    });
});

备注:

• 使用 CSS 类(而不是 HTML ID)对相似的元素进行分组。请注意，我的代码根本不需要 ID，您可以删除它们，除非您确实需要它们用于其他用途。
• 这使用 event delegation .
• .not() 从 jQuery 的列表中排除元素。
• .slideToggle() 的“完整”回调中的 this 引用动画元素(因此，每个动画元素都会调用一次“完整”回调，不是在所有选定的元素完成滑动之后 - 当您在某个时刻对多个元素进行动画处理时要记住这一点)