cuốn sách gpt4 ai đã làm

Trình đơn thả xuống đa cấp với li & ul với vòng lặp mảng PHP với CSS và jQuery

In lại Tác giả: Walker 123 更新时间:2023-11-28 03:49:58 29 4
mua khóa gpt4 Nike


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

nhập mô tả hình ảnh ở đây

这是我的 CSS 和 HTML 代码

ul li {
list-style: square;
}

ul li ul li {
list-style: disc;
lề trái: -20px;
}

ul li ul li ul li {
list-style: circle;
lề trái: -20px;
}

  • 2014

    • 11

      • Manifestations en Roumanie

      • Article 1

      • Article 2

      • Article 3

      • Article 4



    • 12

      • Article 5





  • 2015

    • 10

      • Article 6





  • 2017

    • 03

      • Article 7





第一眼看上去很简单,但问题是我有一个 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 "
    ";
    foreach($arr_liste as $A=>$M){
    echo "
  • " . $A;
    echo "
      ";
      foreach($M as $Mkey=>$T){
      echo "
    • ";
      switch($Mkey){
      case '01':
      echo 'Janvier';
      phá vỡ;
      case '02':
      echo 'Février';
      phá vỡ;
      case '03':
      echo 'Mars';
      phá vỡ;
      case '04':
      echo 'Avril';
      phá vỡ;
      case '05':
      echo 'Mai';
      phá vỡ;
      case '06':
      echo 'Juin';
      phá vỡ;
      case '07':
      echo 'Juillet';
      phá vỡ;
      case '08':
      echo 'Août';
      phá vỡ;
      case '09':
      echo 'Septembre';
      phá vỡ;
      case '10':
      echo 'Octobre';
      phá vỡ;
      case '11':
      echo 'Novembre';
      phá vỡ;
      case '12':
      echo 'Décembre';
      phá vỡ;
      }
      echo "";
      echo "
    • ";
      }
      echo "
    ";
    echo "
  • ";
    }
    echo "
";

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

câu trả lời hay nhất

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

$("li").click(function (e) {
e.stopPropagation();
$(this).find("ul").toggle();
});
ul li {
list-style: square;
}

ul li ul li {
list-style: disc;
lề trái: -20px;
}

ul li ul li ul li {
list-style: circle;
lề trái: -20px;
}


  • 2014

    • 11

      • Manifestations en Roumanie

      • Article 1

      • Article 2

      • Article 3

      • Article 4



    • 12

      • Article 5





  • 2015

    • 10

      • Article 6





  • 2017

    • 03

      • Article 7





关于javascript - 带有 li & ul 的多级下拉列表,带有 PHP 数组循环,带有 CSS 和 jQuery,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43770384/

29 4 0
Chứng chỉ ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com
Xem sitemap của VNExpress