您的位置：首页 > Web前端 > JQuery

jQuery学习之设计树形菜单

2012-11-26 17:46 218 查看

TreeView即树形视图。TreeView一般被布置在页面的侧边栏位置，并可折叠收缩。

以下用两个示例来展示TreeView形式的网站导航功能。

一、普通TreeView

原理：通过设定上层节点中特定元素的鼠标单击触发事件，对下层子节点进行显示样式更改。

实现步骤：

1.获取需要响应鼠标单击事件的上层节点元素对象。

2.对鼠标单击事件进行加工，修改子节点样式。

<script type="text/javascript" src=\'#\'" /jquery-1.8.3.js"></script>

<script type="text/javascript" >

$(document).ready(

function(){

$(".pe_u_thumb_list").children("img").toggle(

/*对父节点中的图片元素设定触发事件*/

function(){ /*鼠标单击图片奇数次时隐藏下层节点*/

$(this).parent().next("ul").hide();

},

function(){/*鼠标单击图片偶数次时展开下层节点*/

$(this).parent().next("ul").show();

}

);

}

);

</script>

<style type="text/css">

ul { list-style:none; }

</style>

</head>

<body>

<ul>

<li class="pe_u_thumb_list"><img src=\'#\'" /listicon.jpg" /><a href="#">CSS</a></li>

<ul>

<li>级联样式</li>

<li>统一设定标记元素样式</li>

</ul>

<li class="pe_u_thumb_list"><img src=\'#\'" /listicon.jpg"/><a href="#">Javascript</a></li>

<ul>

<li>网页前端脚本语言</li>

<li>对事件响应实现网页动态效果</li>

</ul>

</ul>

</body>

效果如下所示：

二、加入淡入淡出效果的TreeView

实现步骤：

1.取得要显示的节点对象，并在其上定义单击事件

2.在单击事件中取得后续标记元素对象整体，并在其上加入切换显示状态动画。

代码中用到的部分函数或方法：

1.jQuery遍历——nextAll()方法，该方法获得匹配元素集合中每个元素的所有跟随的同胞元素，

语法：.nextAll(selector)

2.jQuery效果——toggle()方法，该方法切换元素的可见状态，如果被选元素可见，则隐藏这些元素，如果被选元素隐藏，则显示这些元素。

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

代码如下：

<script type="text/javascript">

$(document).ready(

function(){

var main = $("ul > a"); 

main.click(function(){

var sub = $(this);

var item = sub.nextAll("li");/*取得代表TreeView所有子节点的元素对象*/

item.toggle("slow");/*修改子节点显示状态*/

});

}

);

</script>

<style>

ul { list-style:none;}

</style>

</head>

<body>

<ul><a href="#"><strong>西安邮电大学</strong></a>

<li><img src=\'#\'" /listicon.jpg" /><a href="http://www.xupt.edu.cn">计算机学院</a></li>

<li><img src=\'#\'" /listicon.jpg" /><a href="#">通信与信息工程学院</a></li>

<li><img src=\'#\'" /listicon.jpg" /><a href="#">电子工程学院</a></li>

</ul>

<ul><a href="#"><strong>陕西师范大学</strong></a>

<li><img src=\'#\'" /listicon.jpg" /><a href="http://www.snnu.edu.cn">计算机科学学院</a></li>

<li><img src=\'#\'" /listicon.jpg" /><a href="#">历史文化学院</a></li>

<li><img src=\'#\'" /listicon.jpg" /><a href="#">外国语学院</a></li>

</ul>

</body>

效果如下：

点击“西安邮电大学”几个字，下面的学院信息被隐藏：

本文出自 “开心菠菜” 博客，请务必保留此出处http://kaixinbocai.blog.51cto.com/3913323/1071157

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航