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