通过单击另一个 div 显示/隐藏 div答案

【问题标题】：Show/Hide Div by clicking another div通过单击另一个 div 显示/隐藏 div
【发布时间】：2016-04-17 16:41:14
【问题描述】：

我是 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>

【问题讨论】：

标签： javascript jquery css show-hide

【解决方案1】：

您可以使用 jQuery 库中的 toggle() 函数来完成此操作。 toggle() 不带参数是显示/隐藏 DOM 元素的快捷方式。

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

所以，你的 JS 代码应该是这样的：

$(document).ready(function() {

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

});

DEMO

【讨论】：

【解决方案2】：

Toggle 在 jQuery 中发挥作用：

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

【讨论】：

【解决方案3】：

用这个替换你的JavaScript，它肯定会工作。

$(document).ready(function() {
  $('.DivRed').click(
           function() {
     $('.DivBlue').toggle();
  });
});

【讨论】：

【解决方案4】：

你在这里犯了一些错误，

您无法使用 document.getElementById() 方法通过类名获取 div。您需要使用document.getElementsByClassName() 方法。
document.getElementsByClassName() 返回一个NodeList。您不能为 NodeList 应用 CSS。所以你需要选择一个节点来应用CSS使用document.getElementsByClassName('DivBlue')[0]

要工作，您的代码应更改为

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

【讨论】：