Question

我对JavaScript和jQuery相对较新，不知道从哪里开始，或者如果可能的话。但是，我在屏幕上有三个“浮动”div，我希望能够通过单击身体上的任何位置逐个删除（显示：无）。任何帮助表示赞赏！

这是其中一个'浮动'div的代码（所有三个都具有相同的格式，只是不同的ID）。

<div id="yellow-draggable" class="div">
    <div class="arrow">
        <img class="white-arrow-yellow" src="img/whiteArrow.svg">
    </div>
    <a href="sections/dr.html">
        <div class="box yellow yellow-box">
            <p class="hover-title">Disaster Recovery</p>
            <p class="hover-copy hover-yellow">43% of businesses have tested their disaster recovery plan in the last year.</p>
            <a class="hover-link" href="sections/dr.html">See the full Disaster Recovery results</a> 
        </div>
    </a>
    <div class="graph">
        <img src="img/graphFiveDR.svg">
    </div>
</div>

Answer 1

// this is listen for click event of full body
$("body").on("click", function() {
  // This will hide first visible div on click of body. Let's add animation while hiding so pass face out time.
  $('.div:visible').first().hide(200);

})

.div{
width: 50%;
border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="yellow-draggable1" class="div">
  <div class="arrow">
    <img class="white-arrow-yellow" src="img/whiteArrow.svg">
  </div>
  <a href="sections/dr.html">
    <div class="box yellow yellow-box">
      <p class="hover-title">Disaster1 Recovery</p>
      <p class="hover-copy hover-yellow">3% of businesses have tested their disaster recovery plan in the last year.</p>
      <a class="hover-link" href="sections/dr.html">See the full Disaster Recovery results</a>
    </div>
  </a>
  <div class="graph">
    <img src="img/graphFiveDR.svg">
  </div>
</div>

<div id="yellow-draggable2" class="div">
  <div class="arrow">
    <img class="white-arrow-yellow" src="img/whiteArrow.svg">
  </div>
  <a href="sections/dr.html">
    <div class="box yellow yellow-box">
      <p class="hover-title">Disaster2 Recovery</p>
      <p class="hover-copy hover-yellow">4% of businesses have tested their disaster recovery plan in the last year.</p>
      <a class="hover-link" href="sections/dr.html">See the full Disaster Recovery results</a>
    </div>
  </a>
  <div class="graph">
    <img src="img/graphFiveDR.svg">
  </div>
</div>

<div id="yellow-draggable3" class="div">
  <div class="arrow">
    <img class="white-arrow-yellow" src="img/whiteArrow.svg">
  </div>
  <a href="sections/dr.html">
    <div class="box yellow yellow-box">
      <p class="hover-title">Disaster3 Recovery</p>
      <p class="hover-copy hover-yellow">5% of businesses have tested their disaster recovery plan in the last year.</p>
      <a class="hover-link" href="sections/dr.html">See the full Disaster Recovery results</a>
    </div>
  </a>
  <div class="graph">
    <img src="img/graphFiveDR.svg">
  </div>
</div>

Answer 2

我想如果你的情况总是如此，那么你可以拥有一个计数器。

let counter = 0;

$('body').on('click', function() {
  switch(counter) {
    case 1:
      // set style display none on second div
      break;
    case 2:
      // set style display none on third div
      break;
    default:
       // set style display none on first div
  }
}

我没有测试过代码，但你应该可以做类似的事情。或者使用Rémi.M提到的$（'taget'）。hide（）函数。

Answer 3

我测试了它并且工作正常：

<script type="text/javascript">
$('body').click(function(e){
$('.arrow').hide(200);
$('.box').hide(200);
$('.graph').hide(200);
});
</script>

Answer 4

这是隐藏一次div每次点击的最简单的单行解决方案。单击身体的任何位置。

搜索first visible .box和hide。

$(document).on('click', 'body', function() {
  $('div.box:visible:first').hide();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div id="yellow-draggable" class="div">
    <div class="arrow">
      <img class="white-arrow-yellow" src="img/whiteArrow.svg">
    </div>
    <a href="sections/dr.html">
      <div class="box yellow yellow-box">
        <p class="hover-title">Disaster Recovery</p>
        <p class="hover-copy hover-yellow">43% of businesses have tested their disaster recovery plan in the last year.</p>
        <a class="hover-link" href="sections/dr.html">See the full Disaster Recovery results</a>
      </div>
    </a>
    <a href="sections/dr.html">
      <div class="box yellow yellow-box">
        <p class="hover-title">Disaster Recovery</p>
        <p class="hover-copy hover-yellow">43% of businesses have tested their disaster recovery plan in the last year.</p>
        <a class="hover-link" href="sections/dr.html">See the full Disaster Recovery results</a>
      </div>
    </a>
    <a href="sections/dr.html">
      <div class="box yellow yellow-box">
        <p class="hover-title">Disaster Recovery</p>
        <p class="hover-copy hover-yellow">43% of businesses have tested their disaster recovery plan in the last year.</p>
        <a class="hover-link" href="sections/dr.html">See the full Disaster Recovery results</a>
      </div>
    </a>
    <div class="graph">
      <img src="img/graphFiveDR.svg">
    </div>
  </div>
</body>

Answer 5

我有一个简单的演示，请查看代码段

＆＃13;

$(document).on('click', function(e){
	var $div = $('div');
  var index = 0;
  var timer = window.setInterval(function(){
    if(index < $div.length) {
      $div.eq(index++).hide(600);
    } else {
      window.clearInterval(timer);
    }
  }, 500);
});

＆＃13;

.one {
   width: 200px;
   height: 200px;
   background: #00A321;
   margin: 15px;
   float: left;
}

＆＃13;

<div class="one"></div>
<div class="one"></div>
<div class="one"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

＆＃13;

Answer 6

你也可以试试这个 -

 $(document).ready(function(){
     $('body').on('click','div',function()
     {
          if($(this).attr('id') =='yellowdraggable')
          $(this).attr('style','display: none');
          event.preventDefault();
     })

Answer 7

您也可以使用hide（）方法隐藏div。

$('body').click(function() {
   $('#yellow-draggable').hide();
});

希望它可以帮到你。

鼠标单击时连续关闭div

7 个答案: