Question

我想在html中创建一个按钮（如this页面的“下一步”按钮）。我希望隐藏的内容在被点击时显示。有人请指导我如何做到这一点。

Answer 1

放入所有div容器并使高度为0;默认情况下隐藏溢出，单击按钮使高度为：容器自动并添加类＆＃34;活动＆＃34;如果容器没有激活类，则检查条件然后添加class＆＃34; active＆＃34;到容器

div#container {
  height:0;
  overflow:hidden;
}
div#container.active
 {
   height:auto;
   overflow:auto;
}

Answer 2

HTML：

<input type="button" onclick="javascript:toggle()" value="Toggle visibility">
<div id="showhide" style="display: block">
    This text can be shown or hidden
</div>

使用Javascript：

  window.toggle = function() { 
    // get the Div 
    var myDiv = document.getElementById('showhide');

    // now toggle the visibility, depending on current state
    if (myDiv.style.display == 'block') { 
      // Div is visible. hide it
      myDiv.style.display = 'none';
    } else { 
      // Div is hidden. show it 
      myDiv.style.display = 'block';
    }
  }

以下是一个例子：

http://jsfiddle.net/2njLvf5p/

创建一个按钮以显示隐藏的内容

2 个答案: