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

使用类而不是ID：

HTML：

<input type="button" class="more-button" data-target="[targetID]" value="Read more" />
<div id="[targetID]" class="grow">
    <div class="measuringWrapper">
        [Content]
    </div>
</div>

JS：

function growDiv() {
    var target = this.getAttribute('data-target');
    target = document.getElementById(target);
    if (target.clientHeight) {
        target.style.height = 0;
    } else {
        var wrapper = target.querySelector('.measuringWrapper');
        target.style.height = wrapper.clientHeight + "px";
    }
    this.value = this.value==='Read more'?'Read less':'Read more';
}
var els = document.getElementsByClassName('more-button');
for(var i=els.length-1; i>=0; --i) {
    els[i].onclick = growDiv;
}

DEMO

Answer 2

使用类而不是ID
迭代div并附加事件监听器
使用闭包来保持对事件回调中元素的引用

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]);
    }
})();

Answer 3

使用ID很好，ID在DOM中是唯一的。对于mufti功能，您需要切换到使用类和this关键字。实际上这个功能对我来说似乎更简单了。看看

function growDiv(growDiv) {
    var wrapper = growDiv.getElementsByClassName('measuringWrapper')[0],
        label = growDiv.getElementsByClassName('label')[0];

    wrapper.style.height = (wrapper.clientHeight) ? 0 : growDiv.clientHeight + 'px';
    label.innerHTML = label.innerHTML == 'Read more' ? 'Read less' : 'Read more';
}

这是fiddle

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

3 个答案: