如何将初始值设置为 'Hidden'

Question

我 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

Answer 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>

如何将初始值设置为 'Hidden'

How to set initial value as 'Hidden'

html

javascript

css

collapse