Question

我正在用HTML，bootstrap2和JS实现这个效果。

对不起，我还没有一个有效的例子，并没有找到可以在任何地方演示的例子，所以我只是详细描述我想做的事情。
它是一个纯HTML页面，直观地包含两个垂直对齐的“卡片”。该卡可以只是div包含textbox和button。最初只有一张卡是可见的，另一张是隐藏的，我希望页面大小只适合一张卡。点击卡片1上的按钮后，页面高度应该更大，以适应两张卡片，卡片2显示出来。

我不确定的部分是：我如何隐藏div并通过单击按钮显示它？（我希望页面大小适合任意数量的卡片）我不太熟悉Web开发，所以一个有用的例子将非常有用！

谢谢！

Answer 1

您可以依赖jQuery来显示/隐藏元素。将div元素设置为隐藏，按钮的onclick事件应隐藏/显示元素。

看一下jQuery的api：

http://api.jquery.com/show/

http://api.jquery.com/hide/

http://api.jquery.com/toggle/

简单示例： http://jsfiddle.net/mrkre/KKLZ4/

$('#HideHidden').click(function() {   
    $(".hidden-div").hide();
});

$('#ShowHidden').click(function() {   
    $(".hidden-div").show();
});

然后你需要操纵高度元素的css。

Answer 2

这是我刚刚做过的一个很好的例子。

您应该已经拥有 HTML＆amp; CSS 设置，但这是我使用的。

<强> HTML

<!-- Card 1 -->
<div>
    <textarea></textarea>
    <button id="clickMe">Show second card</button>
</div>

<!-- Card 2 -->
<div style="display: none;" id="newCard">
    <textarea></textarea>
    <button>Do nothing</button>
</div>

<强> CSS：

div{ /* A bit of random styling */
    box-sizing: border-box;
    width: 70%;
    margin: 30px 15%;
    background: skyblue;
    border: 2px solid #EEE;
    text-align:center;
    padding: 50px;
}

Vanilla Javascript

var button = document.getElementById('clickMe');  // 1
var newCard = document.getElementById('newCard'); // 2
button.addEventListener('click', function() {     // 3
   newCard.style.display = 'block';               // 4
});

<强> INFO

获取ID clickMe
的元素
获取ID newCard
的元素
在clickMe元素clicked
时收听
当clickMe为clicked时，newCard的显示设为block

工作演示：http://jsfiddle.net/T4yxz/

Answer 3

在页面加载时，首先将div隐藏起来，方法是将该元素的css样式设置为display：none。如果要显示该元素，请在按钮单击功能中添加.show（）事件。

HTML页面，隐藏的div显示

3 个答案: