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

时间:2018-07-12 15:38:50

标签: javascript jquery html css

我创建了两个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>

2 个答案:

答案 0 :(得分: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>

答案 1 :(得分:1)

我很好奇,为什么不简单地在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>