如何为同类名元素分离jQuery事件？滚动列表按钮问题求助

嘿，我来帮你搞定这个问题！你遇到的核心问题有两个：选择器使用错误，以及没有定位到当前按钮对应的目标列表项，所以才会一点击就收起所有项目。咱们一步步来修复：

第一步：修正选择器 #

你的代码里用了$("bott")和$("item")，这会让jQuery去寻找<bott>和<item>这种自定义标签，但你的按钮和列表项应该是用class定义的对吧？所以要给选择器加上.，比如.bott（匹配class为bott的按钮）和.item（匹配class为item的列表项）。

第二步：定位当前按钮对应的列表项 #

之前的代码会选中所有.item，所以点击任何按钮都会收起所有项目。我们需要用this关键字获取当前点击的按钮，再通过DOM结构或者数据属性找到它对应的那个列表项。

方案1：利用DOM层级关系（推荐，如果按钮在列表项内部） #

假设你的HTML结构是按钮嵌套在对应列表项里，比如：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <div class="item">
    <p>这是项目1</p>
    <button class="bott">收起</button>
  </div>
  <div class="item">
    <p>这是项目2</p>
    <button class="bott">收起</button>
  </div>
</body>
</html>

对应的jQuery代码：

$(document).ready(function(){
  // 选中所有class为bott的按钮
  $(".bott").click(function() {
    // 找到当前按钮最近的父级.item元素
    var currentItem = $(this).closest(".item");
    // 只对这个列表项执行slideUp
    currentItem.slideUp();
  });
});

closest()方法会从当前元素开始向上查找，找到第一个匹配.item的父元素，这样就精准定位到了点击按钮对应的那个列表项。

方案2：用data属性关联（灵活适配任意DOM结构） #

如果按钮和列表项不在同一个父级里，可以给按钮加data-target属性，指定对应的列表项ID：

<button class="bott" data-target="#item1">收起项目1</button>
<div class="item" id="item1">
  <p>这是项目1</p>
</div>

<button class="bott" data-target="#item2">收起项目2</button>
<div class="item" id="item2">
  <p>这是项目2</p>
</div>

对应的jQuery代码：

$(document).ready(function(){
  $(".bott").click(function() {
    // 获取按钮上的data-target值
    var targetItemId = $(this).data("target");
    // 选中对应的列表项并执行slideUp
    $(targetItemId).slideUp();
  });
});

这种方式不管DOM结构怎么调整，只要data-target和列表项的ID对应上就行，非常灵活。

额外需求：点击按钮仅显示单个项目 #

如果你的需求是点击按钮时，只让对应的项目显示，其他项目都收起，可以修改代码为：

$(document).ready(function(){
  $(".bott").click(function() {
    var currentItem = $(this).closest(".item");
    // 收起所有非当前的项目
    $(".item").not(currentItem).slideUp();
    // 切换当前项目的显示状态（如果需要展开）
    currentItem.slideToggle();
  });
});

内容的提问来源于stack exchange，提问作者Glory