来自 服务器&运维 2019-12-08 07:24 的文章
当前位置: 澳门三合彩票 > 服务器&运维 > 正文

如果被选元素隐藏,通常情况下树形菜单是可以

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

使用jquery实现的多级树形菜单代码实例,jquery树形实例

使用jquery实现的多级树形菜单代码实例:
树形菜单在网站中有大量的应用,这当然是因为它的独特优点,首先它可以有效的组织数据,使分类更为清晰明了,通常情况下树形菜单是可以折叠的,这样可以以更小的空间容纳更多的数据,下面就详细介绍一个使用jquery实现的属性菜单。
代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
h1, h2, h3, h4, h5, p, dl, dt, dd, ul, ol, li, input, img, body, button, form, table{
  margin:0;
  padding:0;
  border:0;
  list-style:none;
  font-size:12px;
  font-weight:normal
}
a{text-decoration:none}
a:link, a:visited{color:#333}
a:hover{background:#FC9}
.aside{
  width:163px;
  padding-left:10px
}
.aside h2{
  font-size:16px;
  padding-left:15px
}
.all{background:url(mytest/jQuery/bg_02.gif) no-repeat 0 6px;}
.all1{background:url(mytest/jQuery/bg_02.gif) no-repeat 0 -41px}
.box{background:url(mytest/jQuery/bg_02.gif) no-repeat 0 10px;}
.box1{background:url(mytest/jQuery/bg_02.gif) no-repeat 0 -37px}
.aside ul{margin-left:15px}
.aside li{
  display:none;
  height:24px;
  line-height:24px;
  margin-left:26px
}
.aside .bold{
  display:block;
  font-size:14px;
  height:30px;
  line-height:30px;
  padding-left:15px
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $('.all1').toggle(function(){
    $(this).removeClass('all1').addClass('all').siblings('.myUl').slideUp();
  },function(){
    $(this).removeClass('all').addClass('all1').siblings('.myUl').slideDown();
  });
  $('.box').toggle(function(){
    $(this).removeClass('box').addClass('box1');
  },function(){
    $(this).removeClass('box1').addClass('box');
  });
  $('.bold').toggle(function(){
    $(this).siblings().slideDown(); 
  },function(){
    $(this).siblings().slideUp(); 
  })  
})
</script>
</head>
<body>
<div class="aside">
  <h2 class="all1">KPI考核指标</h2>
  <ul class="myUl">
    当月考核结果
    <li><a href="" title="" alt="澳门三合彩票 1">日考核结果跟踪</a></li>
    <li><a href="" title="" alt="澳门三合彩票 2">日考核扣分分析</a></li>
    <li><a href="" title="" alt="澳门三合彩票 3">日扣分占比分析</a></li>
    <li><a href="" title="" alt="澳门三合彩票 4">月扣分占比分析</a></li>
    <li><a href="" title="" alt="澳门三合彩票 5">考核异常跟踪</a></li>
  </ul>
  <ul class="myUl">
    年累计考核结果
    <li><a href="" title="" alt="澳门三合彩票 6">月考核结果跟踪</a></li>
    <li><a href="" title="" alt="澳门三合彩票 7">年累计扣分分析</a></li>
    <li><a href="" title="" alt="澳门三合彩票 8">扣分占比分析</a></li>
  </ul>
  <ul class="myUl">
    数据统计
    <li><a href="" title="" alt="澳门三合彩票 9">考核指标环比分析</a></li>
    <li><a href="" title="" alt="澳门三合彩票 10">考核指标扣分占比分析</a></li>
    <li><a href="" title="" alt="澳门三合彩票 11">考核指标趋势分析</a></li>
    <li><a href="" title="" alt="澳门三合彩票 12">考核指标排名分析</a></li>
    <li><a href="" title="" alt="澳门三合彩票 13">考核指标同比分析</a></li>
  </ul>
</div>
</body>
</html>

以上代码实现了我们的要求,可以实现属性菜单的折叠和展开效果,下面介绍一下它的实现过程。
一.实现原理:
1.折叠和展开图标的切换:
折叠和展开图标其实是在一张背景图上,当点击的时候,通过控制背景图片的位置就实现了切换效果,具体可以参阅CSS的background-position定位详解一章节。
2.菜单的折叠和隐藏:
菜单的折叠和隐藏主要是控制标题元素的兄弟元素的隐藏和显示实现的,这里不多介绍了,可以参阅相关阅读。
二.代码注释:
1.$(document).ready(function(){}),文档结构完全加载完毕再去执行函数中的代码。
澳门三合彩票,2.$('.all1').toggle(function(){},function(){}),点击元素切换函数的执行。
3.$(this).removeClass('all1').addClass('all').siblings('.myUl').slideUp(),这是一个链式调用,首先会移出当前点击元素上的样式class属性all1,然后为再为其添加样式class属性all,然后将它的同辈元素中class属性值为myUl的元素收缩隐藏,一句话,这段代码实现了点击一级树,实现二级数树隐藏效果。
4.$(this).removeClass('all').addClass('all1').siblings('.myUl').slideDown(),此代码和上面的作用相反,点击一级树,实现二级数的显示效果。下面代码功能都是类似的,这里就不多介绍了。
三.相关阅读:
1.toggle()可以参阅jQuery的toggle()方法一章节。 
2.removeClass()函数可以参阅jQuery的removeClass()方法一章节。 
3.addClass()函数可以参阅jQuery的addClass()方法一章节。 
4.siblings()函数可以参阅jQuery的siblings()方法一章节。 
5.slideUp()函数可以参阅jQuery的slideUp()方法一章节。 
6.slideDown()函数可以参阅jQuery的slideDown()方法一章节。 

原文地址是:

更多内容可以参阅:

使用jquery实现的多级树形菜单代码实例: 树形菜单在网站中有大量的应用,这当然是...

jquery的树形菜单代码 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;} // &#26641;&#29366;&#33756;&#21333; $.ready { $.toggle { $.animate({ height: 'toggle', opacity: 'hide' }, "slow"); $.animate({ height: 'toggle', opacity: 'toggle' }, "slow"); }, function .animate({ height: 'toggle', opacity: 'hide' }, "slow"); $.animate({ height: 'toggle', opacity: 'toggle' }, "slow"); }); $.toggle.next.animate({ height: 'toggle', opacity: 'toggle' }, "slow"); }, function .next.animate({ height: 'toggle', opacity: 'toggle' }, "slow"); }); $.click { $.removeClass; $.removeClass.addClass; $.click { $.removeClass.addClass; $.toggle { $.animate({ height: 'toggle', opacity: 'show' }, "fast"); $.animate({ height: 'toggle', opacity: 'show' }, "fast"); }, function .animate({ height: 'toggle', opacity: 'hide' }, "fast"); $.animate({ height: 'toggle', opacity: 'hide' }, "fast"); }); });全部收起/展开Jihua树形菜单 一级菜单  二级菜单  ·三级菜单 ·三级菜单 ·jihua.cnblogs.com ·三级菜单  二级菜单  ·三级菜单 ·三级菜单 ·三级菜单 ·三级菜单  二级jb51.net  一级脚本  二级菜单计划 二级菜单 二级菜单  一级菜单  二级菜单 二级菜单 二级菜单 

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

定义和用法

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

本文由澳门三合彩票发布于服务器&运维,转载请注明出处:如果被选元素隐藏,通常情况下树形菜单是可以

关键词: