Question

我只是想使用一些css来制作div 0的高度，这也使得子div的所有高度为0.然后我想调用一个javascript函数，当点击它时它会使主div的高度为100 ％。

这是我写的代码：

HTML

<div class="menuTitle" id="ButtonsTopStyle" onclick="ButtonsTop">CONNECTING   RODS</div>
<div class="buttonsTop" >
    <img src="Images/ButtonA.gif" alt="ImageA" class="smallButtons" />
    <img src="Images/ButtonA.gif" alt="ImageA" class="smallButtons" />
    <img src="Images/ButtonA.gif" alt="ImageA" class="smallButtons" />
</div>

<div class="menuTitle" id="ButtonsBottomStyle" onclick="ButtonsBottom">CRANKSHAFTS</div>
<div class="buttonsBottom">
    <img src="Images/ButtonA.gif" alt="ImageA" class="smallButtons" />
    <img src="Images/ButtonA.gif" alt="ImageA" class="smallButtons" />
    <img src="Images/ButtonA.gif" alt="ImageA" class="smallButtons" />
</div>

CSS

.smallButtons {
    box-sizing: border-box;
    margin-left: 10px;
    height: 50px;
    width: 50px;
    margin-top: 15px;
    background-color: white;
}

.menuTitle {
    color: white;
    font-family: "Arial";
    text-align: center;
    font-size: 30px;
    padding-bottom: 30px;
    padding-top: 30px;
}

.buttonsTop {
    margin-left: 23px;
}

.buttonsBottom {
    height: 0;
    margin-left: 23px;
}

我写过的CSS并没有使.buttonBottom的高度为零，它们仍然显示在页面上。我不希望它们显示在页面上

JAVASCRIPT

function ButtonsBottom() {
    document.getElementById("ButtonsTopStyle").style.height = "0";
    document.getElementById("ButtonsBottomStyle").style.height = "100%";
}

function ButtonsTop() {
    document.getElementById("ButtonsBottomStyle").style.height = "0";
    document.getElementById("ButtonsTopStyle").style.height = "100%";
}

正如您所看到的，我希望按钮在加载时不会在页面上显示，但是当您单击onclick="ButtonBottom" div时，它会使高度达到100％并使onclick="ButtonsTop" div具有高度为0

Answer 1

添加

overflow:hidden;

到您的.buttonsBottom div

你的div正在扩大以适应你的内容。

我建议添加一个额外的

类

.hidden {
    height: 0;
    overflow: hidden;
 }

到您的CSS，然后修改您的JavaScript以根据需要添加/删除此类。

另一种选择是使用display: none;和display: block;代替高度。只要你没有在点击时瞄准高度的过渡效果，这将是我的首选方法。

Answer 2

试试这个：

function ButtonsBottom() {
    document.getElementById("ButtonsTopStyle").style.height = "0";
    document.getElementById("ButtonsBottomStyle").style.height = "0%";
}

function ButtonsTop() {
    document.getElementById("ButtonsBottomStyle").style.height = "0";
    document.getElementById("ButtonsTopStyle").style.height = "0%";
}

JavaScript：将主div标签高度设置为零，这使得所有子div的高度为零

2 个答案: