li与ul与PHP阵列循环与CSS和jQuery的多级下拉

我想使用li & ul做一个多级下拉，以显示我的博客按年份和月份排序的所有文章。我想我的下拉看起来像谷歌Blogspot的下拉：li与ul与PHP阵列循环与CSS和jQuery的多级下拉

这里是我的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代码工作，所以我放弃了。在此先感谢您的帮助！

来源

2017-05-03 Bara Kuda

我看不出有任何的努力在这里在你的CSS试图下拉。你只更改列表样式。 – hungerstar

事实是，我完全失去了，我绝对不知道如何开始 –

你需要在你的css中包含诸如'display：block'和'display：hidden'之类的东西。 – developerwjk

为了显示和隐藏列表，您需要使用一个与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>

来源

2017-05-03 21:48:48 Neil

li与ul与PHP阵列循环与CSS和jQuery的多级下拉

回答

相关问题