使用jQuery切换指定class元素时代码出错，请求排查问题原因

咱们直接拆解这段代码里的核心问题，以及对应的修复方法：

1. closest() 方法用错了 #

closest('.Network') 的作用是从当前元素开始向上查找最近的祖先元素，但你的 .Network 元素是 .testCategory 的平级兄弟节点，并不是它的父级/祖先元素，所以这个选择器根本找不到任何目标元素，自然没法触发显示/隐藏的切换效果。

2. 未阻止a标签的默认跳转行为 #

点击带有 href="#" 的 <a> 标签时，浏览器会默认触发锚点跳转（跳到页面顶部），这会打断你的交互逻辑，导致体验变差。

修复后的完整代码 #

JS代码 #

$(document).ready(function() {
  $('.testCategory').click(function(e) {
    // 阻止a标签的默认跳转行为
    e.preventDefault();
    // 查找当前元素的所有.Network类兄弟节点并切换显示状态
    $(this).siblings('.Network').toggle();
  });
});

HTML代码 #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="testCategory">Network</a>
<a href="#" class="Network none">RTT</a>
<a href="#" class="Network none">Capacity</a>
<a href="#" class="Network none">Jitter</a>

额外适配说明 #

如果你的 .Network 元素和 .testCategory 不在同一个父容器下，可以把 siblings('.Network') 换成更精准的选择器：

• 若页面上只有这些目标 .Network 元素，直接用全局选择器：$('.Network').toggle();
• 若有父容器包裹，可通过父容器查找：$(this).parent().find('.Network').toggle();

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