显示特定的div点击

Question

我有这个代码是什么，它显示了点击一些圈子，但是当我点击其中一个圈子出现，我不想那个，我想要的是每个只需点击“click”一词下方的圆圈，就不会显示全部，我该怎么做？这里是我的代码：

$(function() { 
 
    $('.clickme').click(function() { 
 
     $('.circle').toggle() 
 
    }); 
 
});

.circle{ 
 
width: 50px; 
 
height: 50px; 
 
border-radius: 50px; 
 
background-color: blue; 
 
    border-radius: 50%; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    display: none; 
 
    transform: scale(0); 
 
} 
 

 

 
    .circle{ 
 
    animation: popin .25s forwards; 
 
    } 
 
    
 
    .circle:nth-of-type(1){ 
 
    
 
     top: 22px; 
 
     left: 80px; 
 
     } 
 
    .circle:nth-of-type(2){ 
 
     top: 22px; 
 
     left: 48px; 
 
     } 
 
    .circle:nth-of-type(3){ 
 
     top: 22px; 
 
     left: 16px; 
 
     } 
 

 
@keyframes popin { 
 
    80% { 
 
    transform: scale(1.15); 
 
    } 
 
    100% { 
 
    opacity: 1; 
 
    transform: scale(1); 
 
    } 
 
}

<script 
 
    src="https://code.jquery.com/jquery-1.9.1.min.js" 
 
    integrity="sha256-wS9gmOZBqsqWxgIVgA8Y9WcQOa7PgSIX+rPA0VL2rbQ=" 
 
    crossorigin="anonymous"></script> 
 

 
<ul> 
 
    <li class="circles"> 
 
    <button class="circle"></button> 
 
    <button class="circle"></button> 
 
    <button class="circle"></button> 
 
    <div class="clickme">click</div> 
 
    </li> 
 
</ul> 
 
    
 
<ul> 
 
    <li class="circles"> 
 
    <button class="circle"></button> 
 
    <button class="circle"></button> 
 
    <button class="circle"></button> 
 
    <div class="clickme">click</div> 
 
    </li> 
 
</ul> 
 
    
 
<ul> 
 
    <li class="circles"> 
 
    <button class="circle"></button> 
 
    <button class="circle"></button> 
 
    <button class="circle"></button> 
 
    <div class="clickme">click</div> 
 
    </li> 
 
</ul>

Answer 1

.circle将针对所有.circle秒。要针对.circle是你点击.clickme元素，你可以使用$.siblings()因为他们是相邻的.clickme

$(function() { 
 
    $clickme = $('.clickme'); 
 
    $(document).on('click','.clickme',function(e) { 
 
     $(this).closest('ul').siblings('ul').find('.circle').hide(); 
 
     $(this).siblings('.circle').toggle(); 
 
     e.stopPropagation(); 
 
    }).on('click',function() { 
 
     $('.circle').hide(); 
 
    }); 
 
});

.circles { position: relative; } 
 
.circle{ 
 
width: 50px; 
 
height: 50px; 
 
border-radius: 50px; 
 
background-color: blue; 
 
    border-radius: 50%; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    display: none; 
 
    transform: scale(0); 
 
} 
 

 

 
    .circle{ 
 
    animation: popin .25s forwards; 
 
    } 
 
    
 
    .circle:nth-of-type(1){ 
 
    
 
     top: 22px; 
 
     left: 80px; 
 
     } 
 
    .circle:nth-of-type(2){ 
 
     top: 22px; 
 
     left: 48px; 
 
     } 
 
    .circle:nth-of-type(3){ 
 
     top: 22px; 
 
     left: 16px; 
 
     } 
 

 
@keyframes popin { 
 
    80% { 
 
    transform: scale(1.15); 
 
    } 
 
    100% { 
 
    opacity: 1; 
 
    transform: scale(1); 
 
    } 
 
}

<script 
 
    src="https://code.jquery.com/jquery-1.9.1.min.js" 
 
    integrity="sha256-wS9gmOZBqsqWxgIVgA8Y9WcQOa7PgSIX+rPA0VL2rbQ=" 
 
    crossorigin="anonymous"></script> 
 
    
 
<ul> 
 
    <li class="circles"> 
 
    <button class="circle"></button> 
 
    <button class="circle"></button> 
 
    <button class="circle"></button> 
 
    <div class="clickme">click</div> 
 
    </li> 
 
</ul> 
 
    
 
<ul> 
 
    <li class="circles"> 
 
    <button class="circle"></button> 
 
    <button class="circle"></button> 
 
    <button class="circle"></button> 
 
    <div class="clickme">click</div> 
 
    </li> 
 
</ul> 
 
    
 
<ul> 
 
    <li class="circles"> 
 
    <button class="circle"></button> 
 
    <button class="circle"></button> 
 
    <button class="circle"></button> 
 
    <div class="clickme">click</div> 
 
    </li> 
 
</ul>