时间戳

首页 > 解决方案 > 使用 JQuery 创建树样式列表

javascript - 使用 JQuery 创建树样式列表

问题描述

我有一个 javascript 函数，它<ul>为数组中的每个索引创建元素，该数组是从 PHP 中完成的 MySqli 查询创建的。

我想要做的是允许用户单击每个<ul>元素以显示他们的孩子<ul>（也可以用来显示孩子）或<li>元素（可以单击以调用函数）。

HTML, JS, PHP:

<div id ="fileTreeContainer"></div>

<script type="text/javascript">

<?php
$genre_query = "SELECT DISTINCT genre FROM songs ORDER BY genre ASC;";
$genre_result = $connect -> query($genre_query);
$genre_row = $genre_result -> fetch_array(MYSQLI_NUM);
$genre_array = json_encode($genre_row);

echo "var genreArray = " . $genre_array . ";";
?>

function genreList(item) {
  $("#fileTreeContainer").append("<ul class=\"genre\">" + item + "<li class=\"hidden\">\"artist\">jfkjfk</li></ul>");
}

genreArray.forEach(genreList);

</script>

CSS:

.hidden { display: none; }

我已经尝试使用许多旨在创建像这样的树形菜单的库，但我无法得到任何工作。

我$('.genre').click( function() { $('.hidden', this).toggle(); } );用来隐藏/显示子元素，但这不允许单击子元素。

我也包含 React，但我仍然不熟悉它。

有人可以帮我吗？我整天都在浏览现有问题并尝试解决方案，但无济于事。

标签： javascripthtmljquerycss

解决方案

我最终只使用<details><summary了这样的嵌套元素：

<details><summary>summary1</summary>

  <details><summary>summary2</summary>
    
    <details><summary>summary3</summary>
      <p>content1</p>
    </details>

    <p>content2</p>
    <p>content3</p>

  </details>

  <details><summary>summary4</summary>
    <p>content5</p>
    <p>content6</p>
  </details>

</details>

虽然仍然使用 jquery 创建元素。

推荐阅读