javascript - 第一次点击 - 更改 ul 高度，第二次点击 - 重置高度

Question

我需要按钮来改变 ul 高度(第一次点击 - 最小化(使高度:0px;)和第二次点击 - 最大化(使高度:100px))

<button> minimize / maximize</button>
<ul>
    <li>123</li>
    <li>123</li>
    <li>123</li>
    <li>123</li>
    <li>123</li>
    <li>123</li>
    <li>123</li>
</ul>
<style>
ul {
    height:100px;
    overflow:scroll;
    border:1px solid red;
}
</style>

Demo

Answer 1

试试这个:

查看代码内嵌注释:

document.getElementById('myButton').addEventListener('click', function () {
    var clickCount = parseInt(this.getAttribute('data-clicked'), 10);
    // Get clicked count from the data attribute

    if (clickCount++ % 2) {
        // If clicked count odd
        document.getElementById('myUl').style.height = '0px';
    } else {
        // if clicked count is even
        document.getElementById('myUl').style.height = '100px';
    }
    this.setAttribute('data-clicked', clickCount);
    // Updated clicked count by one
}, false);

Demo