javascript - 可折叠 Div 脚本。代码不适用于多个 div

Question

想知道如何让我的代码适用于多个可折叠 div，而无需创建相同 CSS/JS 代码的其他实例？

到目前为止，我只成功地使其适用于 1 个 div。我对 JS 还是个新手，我喜欢学习新技术。

我很高兴听到一些反馈。

<input type="button" onclick="growDiv()" value="Read more" id="more-button">
<div id='grow'>
    <div class='measuringWrapper'>
        <div class="text">Testing Collapse Testing Collapse Testing Collapse Testing Collapse Testing Collapse Testing Collapse v Testing Collapse Testing Collapse</div>
    </div>
</div>

JS

function growDiv() {
    var growDiv = document.getElementById('grow');
    if (growDiv.clientHeight) {
        growDiv.style.height = 0;
    } else {
        var wrapper = document.querySelector('.measuringWrapper');
        growDiv.style.height = wrapper.clientHeight + "px";
    }
    document.getElementById("more-button").value = document.getElementById("more-button").value == 'Read more' ? 'Read less' : 'Read more';
}

这是我的 JSfiddle

http://jsfiddle.net/kGs7Q/1/

Answer 1

1. 使用类而不是 ID
2. 迭代一次 div 并附加事件监听器
3. 使用闭包来保留对事件回调内元素的引用

this JSFiddle 中的工作示例.

这里是 HTML/JS 供引用:

HTML:

<div class="collapsible">
    <input type="button" value="Read more" class="more-button">
    <div class='growable'>
        <div class='measuringWrapper'>
            <div class="text">Testing Collapse Testing Collapse Testing Collapse Testing Collapse Testing Collapse Testing Collapse v Testing Collapse Testing Collapse</div>
        </div>
    </div>
</div>

复制粘贴任意数量的内容。

JS:

(function() {
    var i, len, collapsibles = document.getElementsByClassName('collapsible');
    for (i = 0, len = collapsibles.length; i < len; i++) {
        (function(collapsible) {
            var button = collapsible.getElementsByClassName('more-button')[0];
            var growDiv = collapsible.getElementsByClassName('growable')[0];
            var wrapper = growDiv.getElementsByClassName('measuringWrapper')[0];
            button.addEventListener('click', function() {
                if (growDiv.clientHeight) {
                    growDiv.style.height = 0;
                }
                else {
                    growDiv.style.height = wrapper.clientHeight + "px";
                }
                button.value = (button.value === 'Read more' ? 'Read less' : 'Read more');
            });
        })(collapsibles[i]);
    }
})();