如何使用CSS和javascript制作可扩展框？

Question

编辑：我应该指定我希望它是动画的和可伸缩的。 那么，为什么+号不随盒子的其余部分一起移动呢？ 为什么它不动画？ 我有过渡CSS。

我知道这已经被问过了，但是我尝试编写自己的，但这只是...行不通。 检查jsfiddle以了解我的意思。

我不是想使用太多的Javascript。 我只用它来切换菜单状态。 所有动画都必须是CSS。 现在，唯一让我感到困惑的是为什么这不起作用？

jsfiddle： http : //jsfiddle.net/bjhph51u/1/

HTML：

<div id="expandbox" expanded="false">
<input name="username" type="text" placeholder="Username" disabled></input>
<input name="password" type="password" placeholder="Password" disabled></input>
<button type="submit" disabled>go</button>
</div>
<a href="#" id="plus" onclick="expandBox()">
+
</a>

Javascript：

//expand top box
var box = document.getElementById("expandbox");
function expandBox(){
    if(box.getAttribute("expanded")=="false"){
        box.setAttribute("expanded","true");
        box.style.height="100px";
        box.style.display="block";
    }else{
        box.setAttribute("expanded","false");
        box.style.height="0px";
        box.style.display="none";
    }
}

CSS：

#expandbox {
    display:none;
    position:fixed;
    height:0px;
    -webkit-transition:height 0.5s;
    transition:height 0.5s;
    -o-transition:height 0.5s;
    -moz-transition:height 0.5s;
}

请帮助我，在此先感谢！

Answer 1

问题是，您的函数是分配给window.onload的匿名函数中的局部变量。 在以下位置更改您的提琴选项：Frameworks＆Extensions到No wrap - in <body> 。 这样，函数将变为全局函数，您可以很好地调用它。

Answer 2

我已经按如下所示编辑了HTML和JS代码，现在可以正常工作了。 试试看！！

HTML代码：

<div id="expandbox" expanded="false">
        <input name="username" type="text" placeholder="Username" disabled></input>
        <input name="password" type="password" placeholder="Password" disabled></input>
        <button type="submit" disabled>go</button>
</div>
<a href="#" id="plus">+</a>

JS代码：

//expand top box
var box = document.getElementById("expandbox");
function expandBox(){
    if(box.getAttribute("expanded")=="false"){
        box.setAttribute("expanded","true");
        box.style.height="100px";
        box.style.display="block";
    }else{
        box.setAttribute("expanded","false");
        box.style.height="0px";
        box.style.display="none";
    }
}
document.getElementById("plus").onclick = expandBox;

Answer 3

您可以尝试这样的事情：

$('#plus').click(function() {
   $('#expandbox').toggle("slow");
});

如何使用CSS和javascript制作可扩展框？

问题描述

3 个解决方案

解决方案1
2 2014-12-10 11:03:07

解决方案2
1 2014-12-10 11:09:48

解决方案3
0 2014-12-10 11:02:39

如何使用CSS和javascript制作可扩展框？

问题描述

3 个解决方案

解决方案1 2 2014-12-10 11:03:07

解决方案2 1 2014-12-10 11:09:48

解决方案3 0 2014-12-10 11:02:39

解决方案1
2 2014-12-10 11:03:07

解决方案2
1 2014-12-10 11:09:48

解决方案3
0 2014-12-10 11:02:39