javascript - 在点击时显示特定的div

我有这段代码的作用是，它在单击时显示了一些圆圈，但是当我单击其中的一个时，所有的圆圈都会出现，我不希望那样，我想要的是每次单击时仅在单词“单击”来显示不是全部，我该怎么办？这是我的代码：

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

最佳答案

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

关于javascript - 在点击时显示特定的div，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44874331/