Collapsable Div脚本。代码不适用于多个div

Z时代
2024-01-10
分类：问答

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

到目前为止，我只设法使其工作1格。我还是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>

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/

回答：

使用类没有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]); 
    } 
})();

回答：

使用ID s是伟大的，但ID s为在DOM独特。对于多功能你需要切换到使用类和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

回答：

使用类代替IDS：

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