如何使<div>消失然后重新出现

Question

我试图为我的网站制作常见问题解答部分，但我似乎无法使这个简单的代码工作，我已经被踩了几个小时，我试图使一个方框消失onclick，然后重新出现。我已经让它消失了但是当我再加入时，整个事情就会消失。这是我的代码：

＆＃13;

＆＃13;

function showDiv() {
  document.getElementById('FAQPage').style.display = "block";
}

function closeDiv() {
  document.getElementById('FAQPage').style.display = "none";
}

function showOrHide() {
  if (document.getElementById('FAQPage').style.display = "block") {
    closeDiv()
  } else {
    showDiv()
  }
}

＆＃13;

#FAQPage {
  background-color: #F8F8F8;
  width: 50%;
  position: absolute;
  left: 41%;
  height: auto;
  top: 10%;
  display: none;
}

＆＃13;

<div id="FAQSidebar-buttons" onclick="showOrHide()">
  <h2 align="center">What kind of websites can we do?</h2>
</div>

<div id="FAQPage">
  <h1 align="center">What kind of websites can we do?</h1>
  <hr />
  <p align="center">Here at The Castle, when it comes to web design we can do almost anything! We can do Ecommerce, mobile websites, personal websites, and much more! Here, no matter what kind of business you have, you can get a site for it.</p>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

你有拼写错误：

if(document.getElementById('FAQPage').style.display == "block") // double == should be used here

更新代码：

function showDiv() {
	document.getElementById('FAQPage').style.display = "block";
}
function closeDiv() {
	document.getElementById('FAQPage').style.display = "none";
}
function showOrHide() {
	if(document.getElementById('FAQPage').style.display == "block") {
		closeDiv()
	}
	else {
		showDiv()
	}
}

#FAQPage{
	background-color:#F8F8F8;
	width:50%;
	position:absolute;
	left:41%;
	height:auto;
	top:10%;
	display:none;
}

<div id="FAQSidebar-buttons" onclick="showOrHide()">
    			<h2 align="center">What kind of websites can we do?</h2>
</div>

<div id="FAQPage">
			<h1 align="center">What kind of websites can we do?</h1><hr />
			<p align="center">Here at The Castle, when it comes to web design we can do almost anything! We can do Ecommerce, mobile websites, personal websites, and much more! 
			Here, no matter what kind of business you have, you can get a site 
			for it.</p>
</div>

P.S。：通常showOrHide称为toggle（例如：toggleVisibility）

Answer 2

您需要在条件中修复=，而使用===，第一个将分配，第二个将检查。

而不是每次都使用document.getElementById，而是使用变量来存储它，以防止每次都查询DOM。

＆＃13;

＆＃13;

var faqPage = document.getElementById('FAQPage');

function showDiv() {
  faqPage.style.display = "block";
}

function closeDiv() {
  faqPage.style.display = "none";
}

function showOrHide() {
  if (faqPage.style.display === "block") {
    closeDiv()
  } else {
    showDiv()
  }
}

＆＃13;

#FAQPage {
  background-color: #F8F8F8;
  width: 50%;
  position: absolute;
  left: 41%;
  height: auto;
  top: 10%;
  display: none;
}

＆＃13;

<div id="FAQSidebar-buttons" onclick="showOrHide()">
  <h2 align="center">What kind of websites can we do?</h2>
</div>

<div id="FAQPage">
  <h1 align="center">What kind of websites can we do?</h1>
  <hr />
  <p align="center">Here at The Castle, when it comes to web design we can do almost anything! We can do Ecommerce, mobile websites, personal websites, and much more! Here, no matter what kind of business you have, you can get a site for it.</p>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

可能需要将赋值运算符更改为等价运算符

if(document.getElementById('FAQPage').style.display = "block") {

为：

if(document.getElementById('FAQPage').style.display == "block") {

Answer 4

使用类清晰如：

＆＃13;

＆＃13;

function showOrHide(){
    var faq = document.getElementById("FAQPage");
    faq.classList.toggle("showed");
}

＆＃13;

#FAQPage{
    background-color:#F8F8F8;
    width:50%;
    position:absolute;
    left:41%;
    height:auto;
    top:10%;
    display: none
}

#FAQPage.showed{
    display: block;
}

＆＃13;

<div id="FAQSidebar-buttons" onclick="showOrHide()">
	<h2 align="center">What kind of websites can we do?</h2>
</div>

<div id="FAQPage">
    <h1 align="center">What kind of websites can we do?</h1><hr />
    <p align="center">Here at The Castle, when it comes to web design we can do almost anything! We can do Ecommerce, mobile websites, personal websites, and much more! 
        Here, no matter what kind of business you have, you can get a site 
        for it.</p>
</div>

＆＃13;

＆＃13;

＆＃13;