Maison > Article > interface Web > Explication détaillée des étapes pour implémenter le répertoire arborescent avec jquery

Explication détaillée des étapes pour implémenter le répertoire arborescent avec jquery

php中世界最好的语言original: 2018-04-23 14:19:202165parcourir

Cette fois, je vais vous apporter une explication détaillée des étapes pour implémenter un répertoire arborescent avec jquery Quelles sont les précautions pour implémenter un répertoire arborescent avec jquery Voici des cas pratiques, jetons un coup d'oeil. .

L'exemple de cet article décrit le répertoire arborescent implémenté par jquery. Partagez-le avec tout le monde pour votre référence. La méthode de mise en œuvre spécifique est la suivante :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.st_tree ul li
{
  font-size:13px; 
  color:#222; 
   line-height:18px; 
   cursor:pointer;
   list-style:none; 
   background:url(st_folder.gif); 
  background-repeat:no-repeat;  
  padding:0 0 3px 20px;
}
</style>
</head>
<body>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".ul").hide();
})
$(document).ready(function()
{
  $("#li1").click(function()
  {
  $("#ul1").toggle();
  });
});
$(document).ready(function()
{
  $("#li2").click(function()
  {
  $("#ul2").toggle();
  });
});
$(document).ready(function()
{
  $("#li3").click(function()
  {
  $("#ul3").toggle();
  });
});
</script>
<p class="st_tree">
<ul>
  <li ><a href="#" >一级目录1</a></li>
  <li id="li1"><a href="#" >一级目录2</a></li>
  <ul show="true" id="ul1" class="ul">
    <li ><a href="#" >二级目录2.1</a></li>
    <li ><a href="#" >二级目录2.2</a></li>
  </ul>
  <li id="li2"><a href="#" >一级目录3</a></li>
  <ul id="ul2" class="ul">
    <li ><a href="#" >二级目录3.1</a></li>
    <li ><a href="#" >二级目录3.2</a></li>
    <li id="li3"><a href="#" >二级目录3.3</a></li>
    <ul id="ul3" class="ul">
      <li ><a href="#" >三级目录3.3.1</a></li>
      <li ><a href="#">三级目录3.3.2</a></li>
    </ul>
  </ul>
</ul>
</p>
</body>
</html>

L'effet de l'opération est illustré dans la figure ci-dessous :

Je pense que vous maîtrisez la méthode après En lisant le cas dans cet article, il y aura des choses plus excitantes. Veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Explication détaillée du chargement dynamique des fichiers js par jquery

Téléchargement du fichier d'implémentation JQuery+AJAX

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

php jquery ajax JS

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Explication détaillée des étapes pour implémenter le téléchargement de fichiers avec Jquery+LigerUIArticle suivant：Explication détaillée des étapes pour implémenter le téléchargement de fichiers avec Jquery+LigerUI

Articles Liés

Voir plus