jQuery达成文书档案树效果，jquery达成的树形目录实例

www.301.net 1

如果被选元素可见，则隐藏这些元素，如果被选元素隐藏，则显示这些元素。

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

www.301.net 2

定义和用法

www.301.net 3

图（2）点击后

toggle() 方法切换元素的可见状态。

希望本文所述对大家的jquery程序设计有所帮助。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title></title>
 <style>
  *{
   margin:0;
   padding:0;
   list-style: none;
  }
  .box{
   width: 250px;
   height: auto;
   padding: 20px;
   background: lightgrey;
   margin:0 auto;
  }
  .box li{
   line-height: 30px;
   /*注意：height没有被设置，可以根据实际需要自动调整*/
   position: relative;
  }
  .box li em{
   position: absolute;
   left:0;
   top:7px;
   width: 16px;
   height: 16px;
   background-image:url("http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=123b5048273b92eb544ad6eb0ed57c44");
   background-size:100%;
   cursor: pointer;
  }
  .box li em.open{
   background-image:url("http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=8f89447399822b0294ae590ccc641bf5");
   background-size:100%;
  }
  .box li span{
   padding-left: 20px;
   /*因为span前面的em已经绝对定位，脱离文档流了，所以span的左边界直达 li*/
  }
  .box ul{
   display: none;
  }
  .two{
    margin-left: 20px;
  }
  .three{
   margin-left: 40px;
  }
  .four{
   margin-left: 40px;
  }
  /*ul.box下的li显示，其中有折叠的li加em；
   ul.box下的ul隐藏，其内部的li是没法显示的*/
 </style>
</head>
<body>
<ul class="box">
 <li><em></em>第一级第一个
  <ul class="two">
   <li>第二级第一个</li>
   <li><em></em>第二级第二个
    <ul class="three">
     <li><em></em>第三级第一个
      <ul class="four">
       <li>第四级第一个</li>
       <li>第四级第二个</li>
      </ul>
     </li>
     <li>第三级第二个</li>
    </ul>
   </li>
   <li><em></em>第二级第三个
    <ul class="three">
     <li>第三级第一个</li>
     <li>第三级第二个</li>
    </ul>
   </li>
  </ul>
 </li>
 <li><em></em>第一级第一个
  <ul class="two">
   <li>第二级第一个</li>
   <li><em></em>第二级第二个
    <ul class="three">
     <li><em></em>第三级第一个
      <ul class="four">
       <li>第四级第一个</li>
       <li>第四级第二个</li>
      </ul>
     </li>
     <li>第三级第二个</li>
    </ul>
   </li>
  </ul>
 </li>
</ul>
<script src="http://s0.kuaizhan.com/res/skin/js/lib/jquery-2.0.3.min.js"></script>
<script>
 /*思路：
 * 1.让前面有em的span加上小手效果；
 * 2.点击span or em的时候，看他父容器下是否有ul,如果有，让其显示，否则，隐藏
 * */
 var $box=$('.box');
 var $aSpan=$box.find('span');
 //1.让前面有em的span加上小手效果；
 $aSpan.each(function(index,item){
  //if($(item).prev().length){ $(item).css('cursor','pointer');};思路1:
  $(item).prev('em').next('span').css('cursor','pointer'); //思路2:
 });
 //2.点击span or em的时候，看他父容器下是否有ul,如果有，让其显示，否则，隐藏
 $box.click(function(e){
  //当点击的事件源是em or span的时候，我们看其父级下是否有ul
  // 如果有：展开让其闭合，闭合就让其展开；
  if(e.target.tagName.toLowerCase()=='em' || e.target.tagName.toLowerCase()=='span'){
   var $parent=$(e.target).parent();
   var $ul=$parent.children('ul');
   if($ul){
    if($ul.css('display')=='block'){//展开，让其闭合
     //当闭合的时候，让当前容器下，所有的em都移除open,所有的ul都隐藏；
     $parent.find('ul').hide();
     $parent.find('em').removeClass('open');
    }else{ //闭合让其展开
     $ul.show();
     $parent.children('em').addClass('open');
    }
   }
  }
 })
</script>
</body>
</html>

语法
$(selector).toggle(speed,callback,switch)

运行效果如下图所示：

您可能感兴趣的文章:

jQuery仿写百度百科的目录树
jquery实现的树形目录实例
jQuery遍历节点树方法分析
jQuery树形控件zTree使用小结
多功能jQuery树插件zTree实现权限列表简单实例
jquery树形菜单效果的简单实例
jQuery
zTree加载树形菜单功能
www.301.net，jquery实现树形菜单完整代码
轻松学习jQuery插件EasyUI
EasyUI创建树形菜单
jquery插件treegrid树状表格的使用方法详解（.Net平台）

提示和注释

您可能感兴趣的文章:

jQuery仿写百度百科的目录树
jQuery遍历节点树方法分析
jQuery树形控件zTree使用小结
多功能jQuery树插件zTree实现权限列表简单实例
jquery树形菜单效果的简单实例
jQuery
zTree加载树形菜单功能
jquery实现树形菜单完整代码
轻松学习jQuery插件EasyUI
EasyUI创建树形菜单
jQuery实现文档树效果
jquery插件treegrid树状表格的使用方法详解（.Net平台）

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！

本实例实现了树形的动态菜单，兼容IE8,火狐，Chrome等浏览器。使用了jQuery的toggle()
方法。效果和代码如下：

本文实例讲述了jquery实现的树形目录。分享给大家供大家参考。具体实现方法如下：

代码如下：

以上就是jquery实现树形菜单完整代码，希望对大家的学习jquery程序设计有所帮助。

图（1）点击前

注释：该效果适用于通过 jQuery 隐藏的元素，或在 CSS 中声明 display:none
的元素（但不适用于 visibility:hidden 的元素）。

情形：本类别下面有好多子类别，每个子类别下面又有好多孙类别；需求：当点击本类别时，子类别如果是显示的就让它隐藏，子类别如果是隐藏的就让它显示。

本实例用到jquery的toggle() 方法，介绍如下：

效果如下：

您可能感兴趣的文章:

jQuery仿写百度百科的目录树
jquery实现的树形目录实例
jQuery遍历节点树方法分析
jQuery树形控件zTree使用小结
多功能jQuery树插件zTree实现权限列表简单实例
jquery树形菜单效果的简单实例
jQuery
zTree加载树形菜单功能
轻松学习jQuery插件EasyUI
EasyUI创建树形菜单
jQuery实现文档树效果
jquery插件treegrid树状表格的使用方法详解（.Net平台）

www.301.net 4

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery的树形菜单代码 </title>
<meta name="keywords" content="www.cnblogs.com/jihua"/>
<style type="text/css">
body { font-family:"宋体"; font-size: 12px; line-height: 1.5em; color:#7FB0C8; padding:0; margin:0; background: #336699;}
ul,ol,li,dl,dt,dd { margin:0; padding:0; list-style-type:none;}
h1,h2,h3,form,input,iframe,span { margin:0; padding:0;} 
a { color:#7FB0C8;}
a:link {color: #7FB0C8; TEXT-DECORATION: none;}
a:visited {color: #7FB0C8; TEXT-DECORATION: none;}
a:hover {color: #fff; TEXT-DECORATION: none;}
.white { color:#fff;}
.white a:link {color: #fff; TEXT-DECORATION: none;}
.white a:visited {color: #fff; TEXT-DECORATION: none;}
.white a:hover {color: #73E1F5; TEXT-DECORATION: none;}
/* 树形菜单开始 */
.close { float:right; clear:right; font-size:12px; font-weight:normal; cursor:pointer; padding-right:10px;}
.title { font-size:14px; color:#fff; margin-bottom:10px; padding-left:5px; width:290px;}
.menu { width:290px; height:330px; margin-bottom:10px;}

.l1 { background:#000; font-size:13px; padding:5px 0 0 30px; height:20px; margin-bottom:5px; cursor:pointer;}
.slist { margin:0 0 5px 0; display:none;}
.l2 { padding:0 0 0 35px; font-size:13px;}
.l2 a { padding:6px 0 0 5px; width:230px; height:21px; display:block;} 
.currentl2 a,.l2 a:hover { background:#1E5A82; color:#fff;}
.sslist { background:#156890; width:235px; overflow:hidden; margin:0 0 5px 35px; display:none;}
.l3 a { padding:6px 0 0 5px; width:230px; height:20px; display:block;} 
.currentl3 a,.l3 a:hover { color:#fff; font-weight:bold;}
</style>
<script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
 // 树状菜单
 $(document).ready(function () {
 $(".l1").toggle(function () {
  $(".slist").animate({ height: 'toggle', opacity: 'hide' }, "slow");
  $(this).next(".slist").animate({ height: 'toggle', opacity: 'toggle' }, "slow");
 }, function () {
  $(".slist").animate({ height: 'toggle', opacity: 'hide' }, "slow");
  $(this).next(".slist").animate({ height: 'toggle', opacity: 'toggle' }, "slow");
 });

 $(".l2").toggle(function () {
  $(this).next(".sslist").animate({ height: 'toggle', opacity: 'toggle' }, "slow");
 }, function () {
  $(this).next(".sslist").animate({ height: 'toggle', opacity: 'toggle' }, "slow");
 });

 $(".l2").click(function () {
  $(".l3").removeClass("currentl3");
  $(".l2").removeClass("currentl2");
  $(this).addClass("currentl2");
 });

 $(".l3").click(function () {
  $(".l3").removeClass("currentl3");
  $(this).addClass("currentl3");
 });

 $(".close").toggle(function () {
  $(".slist").animate({ height: 'toggle', opacity: 'show' }, "fast");
  $(".sslist").animate({ height: 'toggle', opacity: 'show' }, "fast");
 }, function () {
  $(".slist").animate({ height: 'toggle', opacity: 'hide' }, "fast");
  $(".sslist").animate({ height: 'toggle', opacity: 'hide' }, "fast");
 });
 });
</script>
</head>
<body>
<h1 class="title">全部收起/展开Jihua树形菜单</h1>
<div class="menu">
 <h1 class="l1">一级菜单</h1>
 <div class="slist">
 <h2 class="l2"><a href="#">二级菜单</a></h2>
 <ul class="sslist">
 <li class="l3"><a href="#">·三级菜单</a></li>
 <li class="l3"><a href="#">·三级菜单</a></li>
 <li class="l3"><a href="#" target="_blank">·jihua.cnblogs.com</a></li>
 <li class="l3"><a href="#">·三级菜单</a></li>
 </ul>
 <h2 class="l2"><a href="#">二级菜单</a></h2>
 <ul class="sslist">
 <li class="l3"><a href="#">·三级菜单</a></li>
 <li class="l3"><a href="#">·三级菜单</a></li>
 <li class="l3"><a href="#" target="_blank">·三级菜单</a></li>
 <li class="l3"><a href="#">·三级菜单</a></li>
 </ul>
 <h2 class="l2"><a href="#">二级jb51.net</a></h2>
 </div>
 <h1 class="l1">一级脚本</h1>
 <div class="slist">
 <h2 class="l2"><a href="#">二级菜单计划</a></h2>
 <h2 class="l2"><a href="#">二级菜单</a></h2>
 <h2 class="l2"><a href="#">二级菜单</a></h2>
 </div>
 <h1 class="l1">一级菜单</h1>
 <div class="slist">
 <h2 class="l2"><a href="#">二级菜单</a></h2>
 <h2 class="l2"><a href="#">二级菜单</a></h2>
 <h2 class="l2"><a href="#">二级菜单</a></h2>
 </div>
</div>
</body>
</html>

jQuery达成文书档案树效果，jquery达成的树形目录实例

您可能感兴趣的文章:

您可能感兴趣的文章:

您可能感兴趣的文章:

相关文章

Post Author: admin

发表评论取消回复

jQuery达成文书档案树效果，jquery达成的树形目录实例

您可能感兴趣的文章:

您可能感兴趣的文章:

您可能感兴趣的文章:

相关文章

Post Author: admin

发表评论 取消回复

发表评论取消回复