Heim >Web-Frontend >js-Tutorial >Detaillierte Erläuterung der Schritte zum Implementieren eines Baumverzeichnisses mit jquery

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

php中世界最好的语言Original: 2018-04-23 14:19:202182Durchsuche

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>

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!

php jquery ajax JS

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Detaillierte Erläuterung der Schritte zum Implementieren des Datei-Uploads mit Jquery+LigerUINächster Artikel：Detaillierte Erläuterung der Schritte zum Implementieren des Datei-Uploads mit Jquery+LigerUI

In Verbindung stehende Artikel

Mehr sehen