如果被选元素可见,则隐藏这些元素,如果被选元素隐藏,则显示这些元素。
<!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>
定义和用法
图(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平台)
<!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>