欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jquery實現(xiàn)的樹形目錄實例

 更新時間：2015年06月26日 09:10:03   作者：wif  
這篇文章主要介紹了jquery實現(xiàn)的樹形目錄,涉及jquery針對頁面元素及鼠標事件的相關(guān)操作技巧,需要的朋友可以參考下

本文實例講述了jquery實現(xiàn)的樹形目錄。分享給大家供大家參考。具體實現(xiàn)方法如下：

<!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>
<div 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>
</div>
</body>
</html>

運行效果如下圖所示：

希望本文所述對大家的jquery程序設計有所幫助。

相關(guān)文章

最新評論