クリックすると特定のdivが表示されます

Question

私はこのコードをクリックするといくつかの円が表示されますが、そのうちの1つをクリックするとすべての円が表示されますが、 「クリック」という言葉の下にある円だけをクリックすると、それらのすべてではないように見えます。どうすればいいですか？ここに私のコードは次のとおりです。

$(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秒を目指します。彼らは.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>