0

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

抱歉，我还没有一个工作示例，也没有找到可以在任何地方演示的示例，所以我将详细描述我想要做什么。
它是一个纯 HTML 页面，视觉上包含两个垂直对齐的“卡片”。该卡可能只是 adiv包含 atextbox和 a button。最初只有一张卡片是可见的，另一张是隐藏的，我希望页面大小只适合一张卡片。在我单击卡片 1 上的按钮后，页面高度应该变得更大以适合两张卡片，并且卡片 2 出现。

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

谢谢！

4

3 回答 3

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。

于 2013-08-20T06:02:50.437 回答
1

这是我刚刚制作的一个很好的例子。

您应该已经设置了HTML 和 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;
}

香草 Javascript

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

信息

  1. 获取具有IDof的元素clickMe
  2. 获取具有IDof的元素newCard
  3. 监听clickMe元素何时出现clicked
  4. 什么时候clickMe设置clicked显示newCard为block

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

于 2013-08-20T22:39:43.770 回答
0

在页面加载时，您从隐藏的 div 开始，将该元素的 css 样式设置为 display:none。当您想要显示该元素时，将 .show() 事件添加到按钮单击功能。

于 2013-08-20T22:24:13.267 回答