Question

我正在尝试在Javascript中执行以下操作，在其中单击向下箭头并向下展开并显示选项（我将在其中包含一些输入字段和复选框以及文本和内容）。< / p>

任何人都可以帮助我或指出我正确的方向，我尝试谷歌搜索，但我不知道他们甚至在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中，expandedBox类应设置为：

.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);
}

Answer 2

一个小小的演示。它可能对你有帮助

的 HTML： 的

<input id="login_button" type="button" value="&or;" /> <form name-"myForm" id="login_form" style="height:150px"> <div id="toggle" style="width:150px; height:100px;position:absolute;top:30px;left:20px;background:#9BCDFF;display:none;padding:10px"> <label for="name">Name:</label> <input type="text" name="name" /> <label for="password">Password:</label> <input type="text" class="password" /> </div> <input type="submit" id="#submit" value="Submit" style="position:absolute; top:150px"/> </form>

的 JQUERY： 的

$('#login_button').click(function(e) { $('#toggle').slideToggle(1200, function() {}); }); $('#submit').click(function() { $('form[name=myForm]').submit(function() { alert('form submit'); }); });

Answer 3

$('#toggleBtn').click(function(){ $("#toggleBox").toggle();});

Answer 4

如果你正在使用jQuery，我想你可能想看看collapsible accordion的jQuery UI实现。

Answer 5

这是一个内置的jquery效果'SlideDown'。请在此处查看：http://api.jquery.com/slideDown

Answer 6

这应该不是很难。您可以使用jQuery动画效果。

一些代码示例，只是为了给你指路：

// html

<div id="some-container">Click me!</div>
<div id="some-container-to-show">Hey, I'm appeared on screen!</div>

// js

$(function () {

  $("#some-container-to-show").hide();
  $("#some-container").live("click", function () {
     $("#some-container-to-show").slideDown();   
  });


});

如何在Javascript中执行此框？

6 个答案: