如何在这个特定的脚本中使全部展开/全部折叠按钮

How to make expand all/collapse all button in this certain script?

本文关键字：全部按钮折叠脚本更新时间：2023-09-26

我想在工作中真正需要做的一项简单任务中寻求帮助（我是javascript新手）。我用这个家伙提供的脚本做了一个简单的可折叠列表http://code.stephenmorley.org/javascript/collapsible-lists/但我现在需要的是标题中所述的两个简单按钮：展开所有和折叠整个列表。你们知道这样的东西是否可以在这个特定的脚本中实现吗？请帮助：）

var CollapsibleLists = new function () {
       this.apply = function (_1) {
           var _2 = document.getElementsByTagName("ul");
           for (var _3 = 0; _3 < _2.length; _3++) {
               if (_2[_3].className.match(/(^| )collapsibleList( |$)/)) {
                   this.applyTo(_2[_3], true);
                   if (!_1) {
                       var _4 = _2[_3].getElementsByTagName("ul");
                       for (var _5 = 0; _5 < _4.length; _5++) {
                           _4[_5].className += " collapsibleList";
                       }
                   }
               }
           }
       };
       this.applyTo = function (_6, _7) {
           var _8 = _6.getElementsByTagName("li");
           for (var _9 = 0; _9 < _8.length; _9++) {
               if (!_7 || _6 == _8[_9].parentNode) {
                   if (_8[_9].addEventListener) {
                       _8[_9].addEventListener("mousedown", function (e) {
                           e.preventDefault();
                       }, false);
                   } else {
                       _8[_9].attachEvent("onselectstart", function () {
                           event.returnValue = false;
                       });
                   }
                   if (_8[_9].addEventListener) {
                       _8[_9].addEventListener("click", _a(_8[_9]), false);
                   } else {
                       _8[_9].attachEvent("onclick", _a(_8[_9]));
                   }
                   _b(_8[_9]);
               }
           }
       };
       function _a(_c) {
           return function (e) {
               if (!e) {
                   e = window.event;
               }
               var _d = (e.target ? e.target : e.srcElement);
               while (_d.nodeName != "LI") {
                   _d = _d.parentNode;
               }
               if (_d == _c) {
                   _b(_c);
               }
           };
       };
       function _b(_e) {
           var _f = _e.className.match(/(^| )collapsibleListClosed( |$)/);
           var uls = _e.getElementsByTagName("ul");
           for (var _10 = 0; _10 < uls.length; _10++) {
               var li = uls[_10];
               while (li.nodeName != "LI") {
                   li = li.parentNode;
               }
               if (li == _e) {
                   uls[_10].style.display = (_f ? "block" : "none");
               }
           }
           _e.className = _e.className.replace(/(^| )collapsibleList(Open|Closed)( |$)/, "");
           if (uls.length > 0) {
               _e.className += " collapsibleList" + (_f ? "Open" : "Closed");
           }
       };
   }();

了解为什么使用订单后遍历很重要。如果您只是从第一个可折叠列表li中进行迭代，则当展开/折叠时，它的"children"可能（将）发生变化，导致在单击（）时它们未定义。

在.html 中

<head>
  ...
  <script>
    function listExpansion() {
      var element = document.getElementById('listHeader');
      if (element.innerText == 'Expand All') { 
        element.innerHTML = 'Collapse All';
        CollapsibleLists.collapse(false); 
      } else { 
        element.innerHTML = 'Expand All';
        CollapsibleLists.collapse(true);
      }
    }
  </script>
  ...
</head>
<body>
  <div class="header" id="listHeader" onClick="listExpansion()">Expand All</div>
  <div class="content">   
    <ul class="collapsibleList" id="hubList"></ul>
  </div>
</body>

在您的collapsableLists.js 中

var CollapsibleLists =
  new function(){
    ...
    // Post-order traversal of the collapsible list(s) 
    // if collapse is true, then all list items implode, else they explode.
    this.collapse = function(collapse){
      // find all elements with class collapsibleList(Open|Closed) and click   them
      var elements = document.getElementsByClassName('collapsibleList' + (collapse ? 'Open' : 'Closed'));
      for (var i = elements.length; i--;) {
        elements[i].click();
      }
    };
    ...
}();