Detaillierte Erläuterung der Schritte zum Implementieren eines Baumverzeichnisses mit jquery-js-Tutorial-php.cn

Detaillierte Erläuterung der Schritte zum Implementieren eines Baumverzeichnisses mit jquery

php中世界最好的语言

Freigeben： 2018-04-23 14:19:20

Original

2202 Leute haben es durchsucht

Dieses Mal werde ich Ihnen die Schritte zum Implementieren eines Baumverzeichnisses mit jquery ausführlich erläutern. Was sind die Vorsichtsmaßnahmen für die Implementierung eines Baumverzeichnisses mit jquery? Hier sind praktische Fälle .

Das Beispiel in diesem Artikel beschreibt das von jquery implementierte Baumverzeichnis. Teilen Sie es als Referenz mit allen. Die spezifische Implementierungsmethode ist wie folgt:

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

Nach dem Login kopieren

Der Betriebseffekt ist in der folgenden Abbildung dargestellt:

Ich glaube, Sie haben die Methode danach gemeistert Wenn Sie den Fall in diesem Artikel lesen, wird es weitere spannende Dinge geben. Bitte beachten Sie andere verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erläuterung des dynamischen Ladens von js-Dateien durch jquery

Download der JQuery+AJAX-Implementierungsdatei

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Schritte zum Implementieren eines Baumverzeichnisses mit jquery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!