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

Question

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

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

我需要有人建议我编写这些 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，它会滑动切换#listB 和滑动当前滑动的任何其他列表。

我有 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 指的是动画元素（因此，每个动画元素都会调用一次“完成”回调，而不是在所有选定元素都完成滑动之后 - 需要保留的内容请注意，当您在某个时间点为多个元素设置动画时）