如何使用 html a 标签来更改 div 的宽度和高度？

Question

<div class="panel">
    <a href onclick="manipulate()">Show Quick Admin (↑)</a>
    <div class="hidden">
        <ul>
            <li>
                <a href="admin.php">Panel</a>
            </li>
        </ul>
    </div>
</div>

所以我想为我正在制作的网站制作一个“快速管理栏”。这是我正在使用的代码，不要介意它不好的事实。我试图让它检查 div“面板”的高度和宽度，如果它是 20px，则更改“a”标签的 innerHTML，显示“隐藏”div，并使其在单击“a”时再次标记它会将 div 高度从 300px 设置回 20px，再次更改 a 标记的 innerHTML，并隐藏“隐藏”的 div。我该怎么做？

javascript：

function manipulate() {
    if ($("#panel").height() == "20") {
        document.getElementsByClassName("panel").style.height= "300px";
        document.getElementsByClassName("hidden").style = "";
    }
}

css:

.panel {
    padding:10px;
    background:#fffdbb;
    position:fixed;
    bottom:15px;
    width:225px; 
    height:20px; /* 300px */
    right:15px;
    border:10;
    border-style:solid;
    border-width:2px;
    border-color:red;
}

.hidden {
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}

现在当单击显示快速管理时它什么也不做。我该如何解决这个问题？

Answer 1

你应该使用 [0]

 document.getElementsByClassName("panel")[0].style.height= "300px"

如果你使用jquery，为什么不使用这个？

$(".panel").css("height","300px");

我建议你使用 id 而不是 class

<div class="panel">

对

<div id="panel">

正确使用方法

http://jsfiddle.net/sb3fY/1/

    <div id="panel">
    <span class="link1">Show Quick Admin (↑)</span>
    <div class="hidden">
        <ul>
            <li>
               <a href="admin.php">Panel</a>
            </li>
        </ul>
    </div>
</div>

Javascript

$(".link1").on("click",function(){
  $("#panel").toggleClass("open");
  $("#hidden").toggle();
});

CSS

    #panel {
    padding:10px;
    background:#fffdbb;
    position:fixed;
    bottom:15px;
    width:225px; 
    height:20px; /* 300px */
    right:15px;
    border:10;
    border-style:solid;
    border-width:2px;
    border-color:red;
}

.hidden {
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}

#panel.open {
 height: 300px;
}