javascript - 通过单击另一个 div 显示/隐藏 Div

Question

我是 javascript 的初学者，我编写了一个简单的代码，试图通过单击另一个 div 来显示/隐藏一个 div。如果有人能检查我写的代码并纠正我，我将不胜感激。提前致谢。

$('DivBlue').ready(function() {
    $('DivRed').on('click', function(){
        document.getElementById('DivBlue').style.display = 'block';
    });
});

.DivRed{
  position:absolute;
  top:0;
  left:0;
  width:15vw;
  height:15vw;
  background-color:red;
}

.DivBlue{
  position:absolute;
  display:none;
  right:0;
  bottom:0;
  width:15vw;
  height:15vw;
  background-color:blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="DivRed"></div>
<div class="DivBlue"></div>

Answer 1

您可以使用 toggle() 来做到这一点 jQuery 库中的函数。不带参数的 toggle() 是显示/隐藏 DOM 元素的快捷方式。

此外，最好在文档上使用 .ready() 而不是 DOM 的元素。

因此，您的 JS 代码应如下所示:

$(document).ready(function() {

    $('.DivRed').on('click', function(){
        $('.DivBlue').toggle();
    });

}); 

DEMO