如何爲多個具有相同類的元素設置非同級的單擊切換功能？

Question

https://jsfiddle.net/9jz3g6b2/

我不希望每$（「藍‘）切換時$（’紅‘）被點擊，而不是，我只是想緊跟$（’藍」）來切換。

<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. 論.red的click ...
2. 獲取parent()那.red ==>.clickme
3. 獲取next()（兄弟姐妹）.clickme的==>.comment
4. 查找.blue內部的.comment
5. toggle()其知名度

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

.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; 
 
}

<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>