在点击时显示特定的div

Question

我有这个代码，它在点击时显示了一些圆圈，但是当我点击其中一个圆圈时出现所有圆圈，我不想要那个，我想要的是每次点击只有圈子下面的＃34;点击＆＃34;看起来不是全部，我怎么能这样做？这是我的代码：

＆＃13;

＆＃13;

collectionView?.register(YOUR_HEADER_CLASS.self, forSupplementaryViewOfKind: UICollectionElementKindSectionHeader, withReuseIdentifier: YOUR_REUSE_ID)

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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>