li＆amp; amp; ul与PHP数组循环与CSS和jQuery

Question

我想使用li＆amp; amp进行多级下拉菜单ul为了显示按年和月分类的博客的所有文章。 我希望我的下拉列表看起来像Google Blogspot Dropdown：

这是我的CSS＆amp; HTML代码

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

乍一看看起来很容易，但问题是我有一个 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来隐藏）。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;