0

リストを折りたたみ可能にし、現在 getElementById - http://acmeous.blogspotでのみ動作するように記述されている関数に、CMS ( https://stackoverflow.com/a/1933623/1336540 ) による getElementsByClassName 関数呼び出しを使用したいと思います。 com/2011/03/how-to-create-easy-collapsible-and.html

同じクラスの HTML 要素が複数存在する可能性があるため、CMS はサイクルを使用してそれらを見つけて処理します。私は彼のコードを適応させようとしていましたが、サイクルを使用しているため、私の JS の能力を超えています。

元の CMS 関数呼び出し:

function toggle_visibility(className) {
var elements = getElementsByClassName(document, className),
   n = elements.length;
for (var i = 0; i < n; i++) {
var e = elements[i];

if(e.style.display == 'block') {
   e.style.display = 'none';
 } else {
   e.style.display = 'block';
 }
}
}

この関数呼び出しを変換して、getElementById を CMS の getElementsByClassName に置き換えるにはどうすればよいですか?

if (window.addEventListener) {
   window.addEventListener("load", function()
   {makeCollapsible(document.getElementById('listCategories'), 1);}, false);
} else if (window.attachEvent) {
   window.attachEvent("onload", function()
   {makeCollapsible(document.getElementById('listCategories'), 1);});
} else {
   window.onload = function()
   {makeCollapsible(document.getElementById('listCategories'), 1);};
}

これを読んで、私を助けようとしてくれてありがとう！

編集: 関数 makeCollapsible:

function makeCollapsible(listElement,listState){
  if(listState!=null) defaultState=listState;

  // removed list item bullets and the sapce they occupy
  listElement.style.listStyle='none';
  listElement.style.marginLeft='0';
  listElement.style.paddingLeft='0';

  // loop over all child elements of the list
  var child=listElement.firstChild;
  while (child!=null){

    // only process li elements (and not text elements)
    if (child.nodeType==1){

      // build a list of child ol and ul elements and show/hide them
      var list=new Array();
      var grandchild=child.firstChild;
      while (grandchild!=null){
        if (grandchild.tagName=='OL' || grandchild.tagName=='UL'){
          if(defaultState==1) grandchild.style.display='block';
          else grandchild.style.display='none';
          list.push(grandchild);
        }
        grandchild=grandchild.nextSibling;
      }

      // add toggle buttons
      if(defaultState==1) {
          var node=document.createElement('img');
          node.setAttribute('src',expandedImage);
          node.setAttribute('class','collapsibleOpen');
          node.style.marginRight="5px";
          node.style.display = "inline";
          node.onclick=createToggleFunction(node,list);
          child.insertBefore(node,child.firstChild);
      } else {
          var node=document.createElement('img');
          node.setAttribute('src',collapsedImage);
          node.setAttribute('class','collapsibleClosed');
          node.style.marginRight="5px";
          node.style.display = "inline";
          node.onclick=createToggleFunction(node,list);
          child.insertBefore(node,child.firstChild);
  }
}

child=child.nextSibling;
  }

}
4

1 に答える 1

0

だから、私はあなたがこのようなDOMを持っていると思います:

<ul id="listCategories">
     <li class="category"><!-- one collapsible list --></li>
     <li class="category"><!-- another collapsible list --></li>
     <li class="category">...
</ul>

から に移行makeCollapsible(document.getElementById('listCategories'), 1)しmakeCollapsible(getElementsByClassName(document, 'category'), 1)ますか?

次に、指定された要素の子ではなく、指定されたノードリストをループする必要があります。

function makeCollapsible(lists, listState){
    if (listState!=null) defaultState=listState;
    for (var i=0; i<lists.length; i++) {
        var child = lists[i];
        if (child.nodeType!=1) continue; // not really neded
        // and then build the list and add the buttons:
        var list=new Array();
        ...
        if(defaultState==1) {
            ...
        } else {
            ...
        }
    }
}
于 2012-04-16T16:35:31.780 に答える