如何将初始值设置为“隐藏”

【问题标题】：How to set initial value as 'Hidden'如何将初始值设置为“隐藏”
【发布时间】：2018-09-11 07:48:57
【问题描述】：

我是following this example 来创建一段文本，单击该文本会展开/折叠文本。

如何将初始值设置为隐藏，使段落最初折叠，点击时展开？

下面是代码。

div#expand {
  width: 500px 
  display:none;
}

<html lang="en">

<head>
  <meta charset="utf-8">
  <script>
    function show() {
      if (document.getElementById('expand').style.display == 'none')
        document.getElementById('expand').style.display = 'block';
      else
        document.getElementById('expand').style.display = 'none';
    }
  </script>
</head>

<body>
  <p>
    <a href="javascript:;" onclick=show()>About Us</a>
    <div id="expand">
      <p>this is all about us. <br></p>
    </div>
  </p>
</body>

</html>

Fiddle Link

【问题讨论】：

标签： javascript html css collapse

【解决方案1】：

document.getElementById('expand').style 将检查不是来自您的 css 文件的内联书写样式...所以尝试将内联 css display:none; 写入该元素。

您也不能在另一个<p> 标记内编写<p> 标记...它无效。

你也错过了 ; 在你的 css 中width:500px

function show() {
  if (document.getElementById('expand').style.display == 'none')
    document.getElementById('expand').style.display = 'block';
  else
    document.getElementById('expand').style.display = 'none';
}

div#expand {
  width: 500px;
}

<a href="javascript:void(0)" onclick=show()>About Us</a>
<div id="expand" style="display:none;">
  <p>this is all about us.<br></p>
</div>

【讨论】：