使用 JQuery 创建树样式列表

Question

I have a javascript function that creates <ul> elements for each index in an array that is created from a MySqli query done in PHP.

What I want to do is allow a user to click each <ul> element to reveal their child <ul> (which can also be used to reveal children) or <li> elements (which can be clicked to call a function).

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

I've tried using a number of libraries designed to create tree-style menus like this but I haven't been able to get anything to work.

I'm using $('.genre').click( function() { $('.hidden', this).toggle(); } ); to hide/reveal the child element but this does not allow for the child element to be clicked.

I also have React included but I'm still not familiar with it.

Could someone help me out? I've been browsing existing questions and trying solutions all day to no avail.

Answer 1

I ended up just using nested <details><summary elements like this:

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

While still using jquery to create the elements.