如何在此特定脚本中制作全部展开/折叠全部按钮？答案

【问题标题】：How to make expand all/collapse all button in this certain script?如何在此特定脚本中制作全部展开/折叠全部按钮？
【发布时间】：2014-12-08 03:38:18
【问题描述】：

我想在我工作中真正需要完成的一项简单任务中寻求帮助（我是一个 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");
           }
       };
   }();

【问题讨论】：

标签： javascript button collapse expand

【解决方案1】：

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

在您的 .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>

在您的 collapsibleLists.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();
      }
    };

    ...

}();

【讨论】：