在Javascript中摺疊和展開樹結構

我需要關於摺疊的幫助，並使用Javascript展開。這是我跑的代碼格式（.html）在Javascript中摺疊和展開樹結構

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

如果運行這個網站，你會得到了把儘可能

Name

的名稱，它的點擊顯示所有子元素

Name: 
    Address: 
     Subject: 
論學科的點擊它顯示標識
Name: 
    Address: 
     Subject: 
       . Id 
什麼，我想在這裏是每個孩子只應在父點擊打開。

當運行HTML，只有名稱選項將顯示

Name: 
在名稱的點擊，只有地址將顯示爲一個子元素。
Name: 
     Address: 

地址的onclick，只有主題將顯示

Name: 
     Address: 
      Subject:

比終於在主題的點擊，ID會顯示出來

Name: 
     Address: 
      Subject: 
       . Id

如何實現這個樹結構。我在這裏做錯了什麼。請給我建議。

來源

2015-06-19 user1893874

檢查：

$('.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>

來源

2015-06-19 19:20:29

我沒有看到這個問題jQuery的標籤，你呢？ – Oka

哈哈當然沒有。 –

感謝您的回覆。有沒有什麼辦法可以用Javascript做到。 – user1893874

您只想定位第一個子元素，而不是循環遍歷所有子元素。你也應該嘗試將你的邏輯從你的標記中分離出來。給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>

來源

2015-06-19 19:36:41 Oka

在Javascript中摺疊和展開樹結構

回答

相關問題