Question

我需要有关崩溃的帮助和使用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，显示所有子元素

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

运行html时，只有名称会显示

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

点击地址，只显示主题

   Name:
        Address:
            Subject:

最后点击主题，ID将显示

   Name:
        Address:
            Subject:
                 . Id

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

Answer 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>

Answer 2

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

cd <DirectoryYourCodeIsIn>
git init
git add .
git commit -m 'initial commit'

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

Answer 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>

在Javascript中折叠和展开树结构

3 个答案: