javascript - 如何用Javascript做这个框？

Question

我正在尝试在 Javascript 中执行以下操作，您单击向下箭头，它会向下展开并显示选项(我将有一些输入字段、复选框、文本和其他内容)。

任何人都可以帮助我或为我指出正确的方向吗？我尝试过谷歌搜索，但我不知道它们在 Javascript 世界中被称为什么。 “Javascript扩展框”，“javascript下拉框”，“javascript扩展模式对话框”等。似乎没有什么命中。

示例如下:

http://imageshack.us/f/810/examplebe.jpg/

顶部(而不是展开部分)会有一个提交按钮，它将提交下拉菜单中的选项以及提交按钮附近部分中的选项。

谢谢!

Answer 1

将标记设置为如下所示:

<div class="expandingBox" id="expandingBox">
    <div id="expandingBoxContent">
        //Content here
    </div>
</div>
<a href="javascript:void(0)" class="expandButton" id="expandButton">Expand</a>

在 CSS 中，expandingBox 类应设置为:

.expandingBox
{
    height: <your initial box height here>
    overflow: hidden;
    // other styling here
}

然后要使其展开，您可以执行以下操作:

$('#expandButton').bind('click', function(){
    var contentHeight = $('#expandingBoxContent').height();
    $('#expandingBox').animate({ height: contentHeight }, 1000);
}