javascript - 带有 li & ul 的多级下拉列表，带有 PHP 数组循环，带有 CSS 和 jQuery

Question

我想使用 li 和 ul 制作一个多级下拉列表，以便显示我博客中按年和月排序的所有文章。我希望我的下拉菜单看起来像 Google Blogspot 下拉菜单:

这是我的 CSS 和 HTML 代码

ul li {
  list-style: square;
}

ul li ul li {
  list-style: disc;
  margin-left: -20px;
}

ul li ul li ul li {
  list-style: circle;
  margin-left: -20px;
}

<ul>
  <li>2014
    <ul>
      <li>11
        <ul>
          <li>Manifestations en Roumanie</li>
          <li>Article 1</li>
          <li>Article 2</li>
          <li>Article 3</li>
          <li>Article 4</li>
        </ul>
      </li>
      <li>12
        <ul>
          <li>Article 5</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>2015
    <ul>
      <li>10
        <ul>
          <li>Article 6</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>2017
    <ul>
      <li>03
        <ul>
          <li>Article 7</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

第一眼看上去很简单，但问题是我有一个 PHP 数组 来显示我的文章。这是我的 PHP 代码:

$result = $bdd->query('SELECT * FROM articles ORDER BY yr ASC, mo ASC LIMIT 10');

$arr_liste = array();
while($rows = $result->fetch()){
$annee = $rows['yr'];
$mo = $rows['mo'];
$titre = $rows['titre'];
$arr_liste[$annee][$mo][]=$titre; 
}
$result->closeCursor();


echo "<ul>";
foreach($arr_liste as $A=>$M){
echo "<li>" . $A;
echo "<ul>";
foreach($M as $Mkey=>$T){
echo "<li>";
switch($Mkey){
    case '01':
    echo 'Janvier';
    break;
    case '02':
    echo 'Février';
    break;
    case '03':
    echo 'Mars';
    break;
    case '04':
    echo 'Avril';
    break;
    case '05':
    echo 'Mai';
    break;
    case '06':
    echo 'Juin';
    break;
    case '07':
    echo 'Juillet';
    break;
    case '08':
    echo 'Août';
    break;
    case '09':
    echo 'Septembre';
    break;
    case '10':
    echo 'Octobre';
    break;
    case '11':
    echo 'Novembre';
    break;
    case '12':
    echo 'Décembre';
    break;
}
echo "<ul>";
foreach($T as $Titre){
  echo "<li>";
  echo '<a href="#" rel="nofollow noopener noreferrer" target="_blank">';
  echo $Titre;
  echo "</a></li>";
}
echo "</ul>";
echo "</li>";
}
echo "</ul>";
echo "</li>";
}
echo "</ul>";

你知道我该怎么做吗？我见过一些解决方案，但它们不适用于我的 PHP 代码，所以我放弃了。提前感谢您的帮助!

Answer 1

为了显示和隐藏列表，您需要使用与 stopPropagation 结合的相对选择器(因此它不会根据您点击的最上面的行隐藏)。

$("li").click(function (e) {
  e.stopPropagation();
  $(this).find("ul").toggle();
});

ul li {
  list-style: square;
}

ul li ul li {
  list-style: disc;
  margin-left: -20px;
}

ul li ul li ul li {
  list-style: circle;
  margin-left: -20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>2014
    <ul>
      <li>11
        <ul>
          <li>Manifestations en Roumanie</li>
          <li>Article 1</li>
          <li>Article 2</li>
          <li>Article 3</li>
          <li>Article 4</li>
        </ul>
      </li>
      <li>12
        <ul>
          <li>Article 5</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>2015
    <ul>
      <li>10
        <ul>
          <li>Article 6</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>2017
    <ul>
      <li>03
        <ul>
          <li>Article 7</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>