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的匿名函数中的局部变量。改变你的小提琴选项：框架和＆amp; No wrap - in <body>的扩展程序。通过这种方式，该功能将变为全局，您可以将其称为正常。

Answer 2

我编辑了HTML＆amp; 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 个答案: