第一次点击 - 改变 ul 高度，第二次点击 - 重置高度答案

【问题标题】：First click - change ul height, second click - reset height第一次点击 - 改变 ul 高度，第二次点击 - 重置高度
【发布时间】：2015-08-25 11:57:24
【问题描述】：

我需要按钮来改变 ul 高度（第一次点击 - 最小化（make height:0px;）和第二次点击 - 最大化（make height: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

【问题讨论】：

标签： javascript css

【解决方案1】：

试试这个：

见代码中的内联 cmets：

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

【讨论】：

【解决方案2】：

你可以在 ul 上切换类：

JavaScript：

$(function(){
    $('button').click(function(){
    $('ul').toggleClass('maximize');
        $('ul').toggleClass('minimize');
    });
$('ul').addClass('minimize');
})();

CSS：

ul {
    height:100px;
    overflow:scroll;
    border:1px solid red;
}
.maximize{
    height:200px;
}
.minimize{
    height:0px;

}

HTML：

<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>

演示：http://jsfiddle.net/vikashvverma/7etcmrcL/3/

【讨论】：

没有jQuery标签，甚至没有提到使用jQuery