Javascript 单击一个div以显示和隐藏另一个div

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

HTML:

---

只要

#div1

上有

mouseDown

，

#div2

可见，就可以在不做任何进一步更改的情况下使用CSS

#第1部分{
高度：100px；
宽度：100px；
背景颜色：橙色；
}
#第二组{
高度：100px；
宽度：100px；
背景颜色：蓝色；
可见性：隐藏；
}
#第1部分：活动+#第2部分{
能见度：可见；
}

---

使用CSS而不做任何进一步的更改，只要

#div1

上有

mouseDown

，

#div2

就可以看到

#第1部分{
高度：100px；
宽度：100px；
背景颜色：橙色；
}
#第二组{
高度：100px；
宽度：100px；
背景颜色：蓝色；
可见性：隐藏；
}
#第1部分：活动+#第2部分{
能见度：可见；
}

---

创建一个额外的类，如

hidden

，然后单击

div1

切换该类。请注意，这个答案使用javascript，如果没有它，就不可能像您在问题中描述的那样进行更改

document.getElementById（'div1'）.addEventListener（'click'，（）=>{
document.getElementById（'div2'）.classList.toggle（'hidden'）；
}，假）
#第1部分{
高度：100px；
宽度：100px；
背景颜色：橙色；
}
#第二组{
高度：100px；
宽度：100px；
背景颜色：蓝色；
}
.隐藏{
可见性：隐藏；
}
Foo
Bar
创建一个额外的类，如
hidden
，然后单击
div1
切换该类。请注意，这个答案使用javascript，如果没有它，就不可能像您在问题中描述的那样进行更改


document.getElementById（'div1'）.addEventListener（'click'，（）=>{
document.getElementById（'div2'）.classList.toggle（'hidden'）；
}，假）
#第1部分{
高度：100px；
宽度：100px；
背景颜色：橙色；
}
#第二组{
高度：100px；
宽度：100px；
背景颜色：蓝色；
}
.隐藏{
可见性：隐藏；
}
Foo
Bar
您可以在
标记中添加下面给出的javscript脚本


函数myFunction（）{
var x=document.getElementById（“div2”）；
如果（x.style.visibility==“隐藏”）{
x、 style.visibility=“可见”；
}否则{
x、 style.visibility=“隐藏”；
}
}
#第1部分{
高度：100px；
宽度：100px；
背景颜色：橙色；
}
#第二组{
高度：100px；
宽度：100px；
背景颜色：蓝色；
可见性：隐藏；
}
您可以在
标记中添加下面给出的javscript脚本


函数myFunction（）{
var x=document.getElementById（“div2”）；
如果（x.style.visibility==“隐藏”）{
x、 style.visibility=“可见”；
}否则{
x、 style.visibility=“隐藏”；
}
}
#第1部分{
高度：100px；
宽度：100px；
背景颜色：橙色；
}
#第二组{
高度：100px；
宽度：100px；
背景颜色：蓝色；
可见性：隐藏；
}
您也可以通过以下方式完成



函数切换函数（）{
var div1=document.getElementById（“div1”）；
var div2=document.getElementById（“div2”）；
如果（div1.style.display==“无”）{
div1.style.display=“块”；
div2.style.display=“无”；
}否则{
div1.style.display=“无”；
div2.style.display=“block”；
}
}

div1
第二组
您也可以通过以下方式完成



函数切换函数（）{
var div1=document.getElementById（“div1”）；
var div2=document.getElementById（“div2”）；
如果（div1.style.display==“无”）{
div1.style.display=“块”；
div2.style.display=“无”；
}否则{
div1.style.display=“无”；
div2.style.display=“block”；
}
}

div1
第二组
详细信息请点击此处：


$（“#div1”）。单击（函数（）{
//警报（“hi”）；
$（“#div2”）.toggleClass（“活动”）；
});
#第1部分{
高度：100px；
宽度：100px；
背景颜色：橙色；
光标：指针
}
#第二组{
高度：100px；
宽度：100px；
背景颜色：蓝色；
可见性：隐藏；
}
.主动{
可见性：可见！重要；
}

JS-Bin
第一组
第2组
详细信息请点击此处：


$（“#div1”）。单击（函数（）{
//警报（“hi”）；
$（“#div2”）.toggleClass（“活动”）；
});
#第1部分{
高度：100px；
宽度：100px；
背景颜色：橙色；
光标：指针
}
#第二组{
高度：100px；
宽度：100px；
背景颜色：蓝色；
可见性：隐藏；
}
.主动{
可见性：可见！重要；
}

JS-Bin
第一组
第2组
这个问题已经得到了回答，答案很好。我想与大家分享另一个完全是CSS的解决方案。它通常被称为“
checkbox hack
”，这在几年前相当流行（很多演示都是由没有使用JS的whack-a-mole类型游戏制作的）

其思想是使用组合标签/复选框，将
状态
（复选框）应用于DOM，并且
状态
使用
：checked
伪类直观地表示。例如，我们可以修改标记并包括输入/标签，如：

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

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

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

在我们的例子中，我们使用了更“宽松”的通用同级选择器（
~
），这意味着当选中复选框时，id为“triggerVisibility”的输入后面的任何内容都将可见性设置为可见。漂亮的
#div1{
height: 100px;
width: 100px;
background-color: orange;
}

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

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

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

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

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