点击Header时所有Contents同步显隐，如何修改实现单独控制？

问题出在你当前的JS代码中，$(".contents")会选中页面上所有类名为contents的元素，所以点击任意Header时所有内容框都会同步切换状态。要实现仅控制对应内容框，核心是定位到当前点击的Header所关联的那个Contents元素。

根据你给出的HTML结构（每个Header后面紧跟对应的Contents），可以通过以下方式修改代码：

修改后的完整代码 #

HTML #

<div class="header">示例1</div>
<div class="contents">示例1的内容</div>
<div class="header">示例2</div>
<div class="contents">示例2的内容</div>

CSS #

.contents{display:none;}
.header{cursor:pointer; user-select:none; margin: 10px 0;}

JavaScript #

$(document).ready(function(){
   $(".header").click(function(){
     // 用$(this)获取当前点击的Header元素，再用.next()找到紧随其后的Contents
     $(this).next(".contents").toggle();
   });
});

拓展：如果HTML结构不是相邻的情况 #

如果你的Header和Contents是嵌套在同一个父容器中的结构（比如下面这样）：

<div class="item">
  <div class="header">示例</div>
  <div class="contents">示例内容</div>
</div>

可以改用closest()结合find()来定位：

$(".header").click(function(){
  $(this).closest(".item").find(".contents").toggle();
});

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