如何在单独的列中显示每个嵌套列表，最好是在使用CSS Grid时？

Question

我有一些嵌套列表。有些深度可达4-5级。例如：

<ul>
    <li>
        <span class="is-parent">parent</span>
        <ul class="children">
            <li class="no-child">child</li>
            <li class="no-child">child</li>
            <li class="no-child">child</li>
        </ul>
    </li>
    <li>some child</li>
    <li>another child</li>
<ul>

此列表显示在css网格列中，第一个列是特定的。我已经使用以下命令设置了列

grid-template-columns: repeat(5, 1fr);

当我单击parent时，我希望嵌套的<ul>显示在下一列中。使用vanila JavaScript最好的方法是什么？

类似于下面的示例：https://mynameistechno.github.io/finderjs/#examples

但不使用库或插件。

Answer 1

HTML

<ul>
  <li>
    <span class="is-parent">parent</span>
    <ul class="children hide">
        <li class="no-child">child</li>
        <li class="no-child">child</li>
        <li class="no-child">child</li>
    </ul>
  </li>
  <li>some child</li>
  <li>another child</li>
<ul>     

CSS

 ul {
     grid-template-columns: repeat(auto-fill, 1fr);
 }
 .hide {
     display: none;
 }

JS

document.querySelectorAll('is-parent').forEach(node => 
    node.parentNode.addEventListener('click', (ev) => {
        let cl = ev.currentTarget.querySelector('ul').classList
        cl.contains('hide') ? cl.remove('hide') : cl.add('hide')
    }
}

Answer 2

没有jQuery库真的很难做到这一点。

但是在这里我只用javascript写了一个例子。

这个想法是，当您单击is-parent时，您将clone Children并附加到container。

您可以在此示例的基础上进行构建。

我希望这能以某种方式帮助你

​

var x = document.getElementsByClassName("is-parent");
var container = document.getElementsByClassName("container")[0];
function bind(items){
new Array(items).forEach(function(item, index){
  item = item[0]
  item.addEventListener("click", function(){
  var children= [].filter.call(item.parentElement.childNodes, function(node) {
    return node.className == "children"
   })[0];
   var i= children.cloneNode(true);
   container.appendChild(i);
   i.style.display = "block";
   
   i.className = index;
  });
});
}
bind(x);

.children{
display:none;
}

ul{
pointer:default;
}

div{
  display: grid;
  grid-template-columns: auto auto auto;
  background-color: #2196F3;
  padding: 10px;

}

<div class="container">
<ul>
    <li>
        <span class="is-parent">parent</span>
        <ul class="children">
            <li class="no-child">child</li>
            <li class="no-child">child</li>
            <li class="no-child">child</li>
        </ul>
    </li>
    <li>some child</li>
    <li>another child</li>
</ul>

</div>

​