Question

我在body标签中创建了两个div。一个div不可见，但是我希望通过单击另一个div使其可见，以及再次单击该div使其消失。基本上，在页面加载时div2不可见，我希望通过单击div1使其可见和隐藏。请帮忙。谢谢！

HTML：

 <div id="div1"></div>
<div id="div2"></div>

CSS：

#div1{
height: 100px;
width: 100px;
background-color: orange;
}

#div2{
height: 100px;
width: 100px;
background-color: blue;
visibility: hidden;
}

Answer 1

创建一个额外的类，例如hidden，然后单击div1切换该类。请注意，此答案使用的是javascript，没有它就无法像您在问题中描述的那样进行更改。

document.getElementById('div1').addEventListener('click', () => {
  document.getElementById('div2').classList.toggle('hidden');
}, false);

#div1 {
  height: 100px;
  width: 100px;
  background-color: orange;
}

#div2 {
  height: 100px;
  width: 100px;
  background-color: blue;
}

.hidden {
  visibility: hidden;
}

<div id="div1">Foo</div>
<div id="div2" class="hidden">Bar</div>

Answer 2

使用CSS无需做任何进一步的更改，只要#div1上有mouseDown，#div2就会显示出来。

#div1{
  height: 100px;
  width: 100px;
  background-color: orange;
}

#div2{
  height: 100px;
  width: 100px;
  background-color: blue;
  visibility: hidden;
}

#div1:active + #div2 {
  visibility: visible;
}

<div id="div1"></div>
<div id="div2"></div>

Answer 3

您可以在<script>标签内添加下面给出的javscript脚本。

function myFunction() {
    var x = document.getElementById("div2");
    if (x.style.visibility === "hidden") {
        x.style.visibility = "visible";
    } else {
        x.style.visibility = "hidden";
    }
}

#div1{
height: 100px;
width: 100px;
background-color: orange;
}

#div2{
height: 100px;
width: 100px;
background-color: blue;
visibility: hidden;
}

<div id="div1" onclick="myFunction()"></div>
<div id="div2"></div>

Answer 4

您也可以通过以下方式进行操作。

<script>
           
    function toggleFunction() {

      var div1 = document.getElementById("div1");
      var div2 = document.getElementById("div2");
      if (div1.style.display === "none") {
          div1.style.display = "block";
          div2.style.display ="none";

      } else {
          div1.style.display = "none";
          div2.style.display="block";
      }
   }
</script>

<div id="div1" onclick="toggleFunction();">div1</div>
<div id="div2" onclick="toggleFunction();">div2</div>

Answer 5

此问题已得到回答，并且答案很好。我想分享另一种完全是CSS的解决方法。它通常被称为“ checkbox hack”，几年前非常流行（大量的演示是由不使用JS的轻便型游戏制作的。）

这个想法是，您使用组合标签/复选框，将state（复选框）应用于DOM，并使用state伪类直观地表示:checked。在您的示例中，我们可以修改标记并添加我们的输入/标签，例如：

<input type="checkbox" id="triggerVisibility"></input>

<div id="div1">
    <label for="triggerVisibility" id="label1"></label>
</div>

<div id="div2"></div>

要注意的重要一件事是，您的复选框应在要应用“状态”的元素之前。这是因为，对于CSS，我们将使用sibling选择器（+或~）

#triggerVisibility:checked ~ #div2 {
    visibility: visible;
}

在我们的示例中，我们使用的是更“宽松”的通用同级选择器（~），这意味着当复选框为时，跟随输入id为“ triggerVisibility”的所有对象的可见性都将设置为visible。检查。太酷了吧？

这是一个小提琴，其中包含其他“状态”（如内容），我们在选中/取消选中输入时会对其进行更改：

http://jsfiddle.net/nrwqh5tp/

Answer 6

在这里查看完整的详细信息：

$("#div1").click(function(){
 // alert("hi");
  $("#div2").toggleClass("Active");
  
});

#div1{
height: 100px;
width: 100px;
background-color: orange;
cursor:pointer
}

#div2{
height: 100px;
width: 100px;
background-color: blue;
visibility: hidden;
}
.Active{
  visibility: visible!important;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>
<body>
<div id="div1">Div 1</div>

<div id="div2">Div 2</div>
</body>
</html>

单击一个div使另一个出现并隐藏

6 个答案: