时间戳

首页 > 解决方案 > 如何在单独的列中显示每个嵌套列表，最好在使用 CSS Grid 时显示？

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

问题描述

我有一些嵌套列表。有些深达 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);

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

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

但不使用库或插件。

标签： javascripthtmlcss

解决方案

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')
    }
}

推荐阅读