Javascript 中的折叠和展开树结构答案

【问题标题】：Collapse and Expand Tree structure in JavascriptJavascript 中的折叠和展开树结构
【发布时间】：2015-09-05 21:09:41
【问题描述】：

我需要有关使用 Javascript 折叠和展开的帮助。这是我的运行代码（.html）

 <h2>Test</h2>
  <html lang="en">
  <head>
     <META http-equiv="Content-Type" content="text/html; charset=utf-16">
     <title></title>
     <script type="text/javascript">  
        function toggleDisplay(element) 
        {       
          element.style.display = element.style.display === 'none' ? '' : 'none'; 
        };
        function toggleDisplayAll(elements) 
        { 
          for(var i=0; i<elements.length; i++)
           {
              toggleDisplay(elements[i]);
           }
        }   
     </script>
   </head>
   <body>  
    <ul>
      <a onclick="toggleDisplayAll(this.parentNode.getElementsByTagName('ul')); return false;" href="#">Name:</a>
        <ul style="display:none;">
        <a onclick="toggleDisplayAll(this.parentNode.getElementsByTagName('ul')); return false;" href="#">Address: </a>
            <ul style="display:none;">
            <a onclick="toggleDisplayAll(this.parentNode.getElementsByTagName('li')); return false;" href="#">Subject: </a>
                <ul style="display:none;">
                    <li style="display:none;">Id
                    </li>
                </ul>
            </ul>
         </ul>
     </ul>
  </body>
 </html>

如果你运行这个 html，你会得到输出

 Name

点击名称，显示所有子元素

 Name:
    Address:
        Subject:
点击主题会显示 ID
  Name:
    Address:
        Subject:
               . Id
我想要的是每个孩子都应该只在父母点击时打开。

运行 html 时，只会显示名称

  Name:
点击名称时，只有地址会显示为子元素。
   Name:
        Address:

点击地址，只会显示主题

   Name:
        Address:
            Subject:

最后点击主题，id会显示出来

   Name:
        Address:
            Subject:
                 . Id

如何实现这个树形结构。我在这里做错了什么。请给我建议。

【问题讨论】：

标签： javascript html css

【解决方案1】：

检查一下：

$('.expand').click(function() {
  $('ul', $(this).parent()).eq(0).toggle();
});

ul li ul {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <a class="expand">Root</a>
    <ul>
      <li>
        <a class="expand">Child</a>
        <ul>
          <li>
            <a class="expand">Super Child</a>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

编辑

如果你不想使用 jQuery，你可以试试这个：

var expander = document.querySelectorAll('.expand');

for (var i = 0; i < expander.length; ++i) {
  expander[i].onclick = function() {
    var ul = this.parentElement.querySelectorAll('ul')[0];
    
    if (ul.offsetHeight > 0) {
      ul.style.display = 'none';
    } else {
      ul.style.display = 'block';
    }
  }
}

ul li ul {
  display: none;
}

    <ul>
      <li>
        <a class="expand">Root</a>
        <ul>
          <li>
            <a class="expand">Child</a>
            <ul>
              <li>
                <a class="expand">Super Child</a>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>

【讨论】：

我在这个问题上没有看到 jQuery 标签，是吗？
感谢您的回复。有什么办法可以使用 Javascript 来做到这一点。
谢谢 Nanang 和 Oka。感谢您展示不同的实施方式。两种解决方案都按我的意愿工作。再次感谢
当然可以。很高兴我能提供帮助；）

【解决方案2】：

您只想定位第一个子元素，而不是遍历所有子元素。您还应该尝试将逻辑与标记分开。阅读unobtrusive JavaScript。

function toggle() {
  var ls = this.parentNode.getElementsByTagName('ul')[0],
      styles, display;

  if (ls) {
    styles = window.getComputedStyle(ls);
    display = styles.getPropertyValue('display');

    ls.style.display = (display === 'none' ? 'block' : 'none');
  }
}


var eles = document.querySelectorAll('.ele');

Array.prototype.slice.call(eles).forEach(function (e) {
  e.addEventListener('click', toggle);
});

ul ul {
  display: none;
}

.ele {
  cursor: pointer;
}

.ele:hover {
  color: red;
}

<ul>
  <li><span class="ele">One</span>
    <ul>
      <li><span class="ele">Two</span>
        <ul>
          <li><span class="ele">Three</span>
            <ul>
              <li><span class="ele">Four</span></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

【讨论】：

【解决方案3】：

在纯 JavaScript 中

document.querySelector('.tree-structure').addEventListener('click', (e) => {
  const el = e.target;
  const sibling = el.nextSibling.nextSibling;

  if (el && el.className == 'toggle' && sibling) {
    sibling.classList.toggle('show');
  }
});

ul ul {
  display: none;
}

.show {
  display: block;
}

<ul class="tree-structure">
  <li>
    <button class="toggle">1st Level</button>

    <ul>
      <li>
        <button class="toggle">2nd Level</button>

        <ul>
          <li>
            <button class="toggle">3rd Level</button>

            <ul>
              <li>
                <button class="toggle">4th Level</button>
              </li>
              <li>
                <button class="toggle">4th Level</button>
              </li>
            </ul>
          </li>
          <li>
            <button class="toggle">3rd Level</button>

            <ul>
              <li>
                <button class="toggle">4th Level</button>
              </li>
              <li>
                <button class="toggle">4th Level</button>
              </li>
            </ul>
          </li>
        </ul>
      </li>
      <li>
        <button class="toggle">2nd Level</button>

        <ul>
          <li>
            <button class="toggle">3rd Level</button>

            <ul>
              <li>
                <button class="toggle">4th Level</button>
              </li>
              <li>
                <button class="toggle">4th Level</button>
              </li>
            </ul>
          </li>
          <li>
            <button class="toggle">3rd Level</button>

            <ul>
              <li>
                <button class="toggle">4th Level</button>
              </li>
              <li>
                <button class="toggle">4th Level</button>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
  <li>
    <button class="toggle">1st Level</button>

    <ul>
      <li>
        <button class="toggle">2nd Level</button>

        <ul>
          <li>
            <button class="toggle">3rd Level</button>

            <ul>
              <li>
                <button class="toggle">4th Level</button>
              </li>
              <li>
                <button class="toggle">4th Level</button>
              </li>
            </ul>
          </li>
          <li>
            <button class="toggle">3rd Level</button>

            <ul>
              <li>
                <button class="toggle">4th Level</button>
              </li>
              <li>
                <button class="toggle">4th Level</button>
              </li>
            </ul>
          </li>
        </ul>
      </li>
      <li>
        <button class="toggle">2nd Level</button>

        <ul>
          <li>
            <button class="toggle">3rd Level</button>

            <ul>
              <li>
                <button class="toggle">4th Level</button>
              </li>
              <li>
                <button class="toggle">4th Level</button>
              </li>
            </ul>
          </li>
          <li>
            <button class="toggle">3rd Level</button>

            <ul>
              <li>
                <button class="toggle">4th Level</button>
              </li>
              <li>
                <button class="toggle">4th Level</button>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

【讨论】：