Question

我创建了两个div，我希望一个div通过单击另一个消失并消失。我尝试使用Jquery和javascript，但似乎无法正常工作。基本上，我希望蓝色的消失并通过单击红色的蓝色出现。

document.getElementById('red').addEventListener('click', () => {
document.getElementById('blue').classList.toggle('blue');
});

#red{
height: 100px;
width: 100px;
background: red;
}
#blue{
height: 100px;
width: 100px;
background: blue;
}

<div id="red"></div>
<div id="blue" class="blue"></div>

Answer 1

例如使用.toggle() ...

$(function(){
  $("#red").on('click', function(){
      console.log('click on red div');
      $("#blue").toggle( "slow", function() {
        // Animation complete.
      });
  });
});

#red{
height: 100px;
width: 100px;
background: red;
}
#blue{
height: 100px;
width: 100px;
background: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="red"></div>
<div id="blue"></div>

Answer 2

我很好奇，为什么不简单地在CSS中将选择器从id更改为class（从#blue更改为.blue）：

document.getElementById('red').addEventListener('click', () => {
  document.getElementById('blue').classList.toggle('blue');
});

#red{
  height: 100px;
  width: 100px;
  background: red;
}
.blue{
  height: 100px;
  width: 100px;
  background: blue;
}

<div id="red"></div>
<div id="blue" class="blue"></div>

通过单击另一个div使div消失并显示

2 个答案: