Свернуть и развернуть Структуру дерева в 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>

Если запустить этот HTML, вы получите из положить в

Name

по щелчку имени, он показаны все дочерние элементы

Name: 
    Address: 
     Subject: 
На щелчку Subject она показывает Id
Name: 
    Address: 
     Subject: 
       . Id 
Что я хочу здесь каждый ребенок должен открываться только на родительских мышах.

При запуске HTML, только имя будет Dispaly

Name: 
На щелчку имя, только адрес будет отображаться как дочерний элемент.
Name: 
     Address: 

OnClick адреса, только Subject будет отображаться

Name: 
     Address: 
      Subject:

Чем, наконец, на щелчку Subject, идентификатор будет отображаться

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 a прочитайте.

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

ответ

Смежные вопросы