이 특정 스크립트에서 all/collapse all 단추를 확장하는 방법은 무엇입니까?

나는 정말로 내 작업에서해야 할 간단한 작업으로 도움을 요청하고 싶다 (나는 자바 스크립트 초보자이다). 나는이 남자 http://code.stephenmorley.org/javascript/collapsible-lists/에 의해 제공되는 스크립트로 간단한 접을 수있는 목록을 만들었지 만, 지금 내가 필요한 것은 제목에 명시된 바와 같이 두 개의 간단한 버튼입니다 : 모두 확장하고 전체 목록을 축소하십시오. 이 스크립트에서 구현할 수있는 기능이 있는지 아십니까? :)이 특정 스크립트에서 all/collapse all 단추를 확장하는 방법은 무엇입니까?

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

출처

2014-10-13 NERV

후 주문 탐색을 사용하는 이유를 이해하는 것이 중요합니다 도와주세요. 첫 번째 접을 수있는 목록 li에서 반복하기 만하면 '어린이'가 펼치거나 접힐 때 변경 될 수 있으므로 클릭 할 때 정의되지 않습니다. 당신의 collapsibleLists.js에서 당신의 .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>

에서

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

    ... 

}();

출처

2015-07-28 16:08:09 DeadJohnDoe

이 특정 스크립트에서 all/collapse all 단추를 확장하는 방법은 무엇입니까?

답변

관련 문제