当有多个具有相同类的元素时，如何为非兄弟姐妹设置单击切换功能？

Question

https://jsfiddle.net/9jz3g6b2/

我不希望每个$（＆＃39; .blue＆＃39;）在点击$（＆＃39; .red＆＃39;）时切换，相反，我只想要紧跟在$（＆＃ 39; .blue＆＃39;）切换。

<div class="clickme">
  <div class="red"></div>
</div>

<div class="comment">
  <div class="green"></div>
  <div class="blue"></div>
</div>

<div class="clickme">
  <div class="red"></div>
</div>

<div class="comment">
  <div class="green"></div>
  <div class="blue"></div>
</div>


<div class="clickme">
  <div class="red"></div>
</div>

<div class="comment">
  <div class="green"></div>
  <div class="blue"></div>
</div>

Answer 1

可以在click事件的一行中完成：

$('.red').on('click', function() {
  $(this).parent().next().find('.blue').toggle();
});

打破它：

1. 在click上的.red ...
2. 获取parent() ==＆gt;的.red .clickme
3. 获取next() ==＆gt;的.clickme（兄弟） .comment
4. 在.blue
中查找.comment
5. toggle()其知名度
＆＃13;
＆＃13;
$('.red').on('click', function() {
  $(this).parent().next().find('.blue').toggle();
});
＆＃13;
.red {
  background-color: red;
  height: 40px;
  width: 100px;
  margin-bottom: 20px;
}
.green {
  height: 100px;
  width: 100px;
  background-color: green;
  margin-top: 50px;
  margin-bottom: 50px;
}
.blue {
  display: none;
  height: 100px;
  width: 100px;
  background-color: blue;
  margin-top: 50px;
  margin-bottom: 50px;
}
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="clickme">
  <div class="red"></div>
</div>

<div class="comment">
  <div class="green"></div>
  <div class="blue"></div>
</div>

<div class="clickme">
  <div class="red"></div>
</div>

<div class="comment">
  <div class="green"></div>
  <div class="blue"></div>
</div>


<div class="clickme">
  <div class="red"></div>
</div>

<div class="comment">
  <div class="green"></div>
  <div class="blue"></div>
</div>
＆＃13;
＆＃13;
＆＃13;