집 >웹 프론트엔드 >JS 튜토리얼 >jquery를 사용하여 트리 디렉터리를 구현하는 단계에 대한 자세한 설명

jquery를 사용하여 트리 디렉터리를 구현하는 단계에 대한 자세한 설명

php中世界最好的语言원래의: 2018-04-23 14:19:202181검색

이번에는 jquery를 사용하여 트리 모양의 디렉토리를 구현하는 단계에 대해 자세히 설명하겠습니다. jquery에서 트리 모양의 디렉토리를 구현하는 경우의 주의 사항은 무엇입니까? 다음은 실제 사례입니다. .

이 문서의 예에서는 jquery로 구현된 트리 디렉터리를 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 구현 방법은 다음과 같습니다.

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

작동 효과는 아래 그림과 같습니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 기타 관련 기사는 PHP 중국어 웹사이트에 있습니다!