代码之家 › 专栏 › 技术社区 › jessica

单击时显示特定div

css jquery javascript

jessica · 技术社区 · 8 年前

我有这段代码,它在点击时显示一些圆圈,但当我点击其中一个时,所有的圆圈都会出现,我不想这样,我想要的是每次点击时,只有“点击”一词下的圆圈会出现,而不是所有的圆圈,我该怎么做?这是我的代码:

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

1 回复 | 直到 8 年前

Michael Coker 8 年前

.circle 将针对所有 圆圈 圆圈 .clickme 元素,您可以使用 $.siblings() 因为它们与

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