jQuery点击slideToggle失效：如何定位跨SVG的目标div兄弟元素？

问题原因 #

你原来的$(this).next(".accordion-content")失效，是因为.accordion的紧邻下一个兄弟元素是SVG，而不是目标的.accordion-content。next()方法只会查找当前元素紧邻的下一个同级元素，自然匹配不到目标内容区块。

不用唯一ID的解决方案 #

方法1：使用nextAll()匹配后续第一个目标元素 #

修改JS代码，用nextAll()获取当前元素之后的所有同级元素，再筛选出第一个.accordion-content：

$(".accordion").on("click", function() {
  $(this).toggleClass("open");
  // 查找当前元素之后所有同级元素里的第一个.accordion-content
  $(this).nextAll(".accordion-content").first().slideToggle();
});

这种方式不管中间插入多少其他元素（比如SVG、额外标签），都能精准定位到对应的内容区块。

方法2：使用siblings()匹配同级目标元素 #

如果每个手风琴头部对应唯一的内容区块，也可以用siblings()直接获取同级的目标元素：

$(".accordion").on("click", function() {
  $(this).toggleClass("open");
  $(this).siblings(".accordion-content").slideToggle();
});

该方法适合单组手风琴的场景，逻辑简单直接。

方法3：用容器包裹手风琴组（更推荐） #

把每个手风琴的头部、中间SVG、内容区块放在同一个容器内，结构更清晰，后续维护也更方便：

<div class="accordion-group">
  <div class="accordion open"><span>Styles</span>
    <div class="info-btn"><i class="fas fa-info"></i></div>
    <span class="accordion-plus-minus"><i class="fal fa-plus"></i><i class="fal fa-minus"></i></span>
  </div>
  <svg id="style-tip-highlight" xmlns="http://www.w3.org/2000/svg"></svg>
  <div class="accordion-content" id="style-accordion"></div>
</div>

对应的JS代码修改为：

$(".accordion").on("click", function() {
  $(this).toggleClass("open");
  // 找到父容器内的.accordion-content
  $(this).closest(".accordion-group").find(".accordion-content").slideToggle();
});

这种方式的优势在于，即使后续添加更多元素，只要在同一个组容器内，就不会影响选择逻辑，扩展性更强。

总结 #

不需要必须使用唯一ID，通过上述几种jQuery方法或结构调整，都能解决你的问题，其中容器包裹的方式更利于长期维护。

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