jQuery实现可收缩展开的级联菜单实例代码

2024-12-16 10:45:27

如果用纯JavaScript代码而不使用框架的话，那么做一个级联菜单也许是一件让人生畏的事情，但有了框架，这件事情就很容易了，这就是框架的好处，极大地提高了开发效率，并且更可靠和易于维护。使用jQuery来实现级联菜单的一般步骤如下：

•1.首先使用<ul>和<li>创建一个级联菜单

代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>itcast.cn的JQuery应用示例：弹出菜单</title>
<link type="text/css" rel="stylesheet" href="css/menu.css" mce_href="css/menu.css" />
<mce:script type="text/javascript" src="jslib/jquery.js" mce_src="jslib/jquery.js"></mce:script>
<mce:script type="text/javascript" src="jslib/jquerymenu.js" mce_src="jslib/jquerymenu.js"></mce:script>
</head>
<body>
    <ul>
        <a href="#" mce_href="#">我是菜单1</a>
        <li><a href="#" mce_href="#">我是子菜单1</a></li>
        <li><a href="#" mce_href="#">我是子菜单2</a></li>
    </ul>
    <ul>
        <a href="#" mce_href="#">我是菜单2</a>
        <li><a href="#" mce_href="#">我是子菜单3</a></li>
        <li><a href="#" mce_href="#">我是子菜单4</a></li>
    </ul>
</body>
</html>

•2.编写JavaScript代码，控制级联菜单的收缩

代码如下:

//需要点击主菜单的按钮时，对应的子菜单可以显示，再次点击子菜单则隐藏
//需要编写代码，在页面装载时，给所有的主菜单添加onclick的事件
//保证主菜单点击时可以显示或隐藏子菜单
//注册页面装载时执行的方法
$(document).ready(function() {
    //这里需要首先找到所有的主菜单
    //然后给所有的主菜单注册点击事件
    //找到ul中的节点
    var as = $("ul > a");
    as.click(function() {
        //这里需要找到当前ul中的li，然后让li显示出来
        //获取当前被点击的a节点
        var aNode = $(this);
        //找到当前a节点的所有li兄弟字节点
        var lis = aNode.nextAll("li");
        //让子节点显示或隐藏
        lis.toggle("show");
    });
});

•创建css文件，来控制标签的显示效果

代码如下:

/*如何让所有的li都不显示小圆点，可以使用css的标签选择器*/
li {
    list-style: none; /*使li前面的小圆点消失*/
    margin-left: 18px; /*让子菜单向右移动一段距离，达到缩进的效果*/
    display: none; /*让所有的子菜单都先隐藏*/
}
a{
text-decoration: none; /*让链接的下划线消失*/
}

jQuery带来的方便：

1.在找被点击的菜单时，仅需要一个$(this)就可以实现

2.节点的显示与隐藏，只用一条语句：toggle()就可以，并且还可以在数组上实现所有节点都具有这种功能。

3.找到某个标签下所有的某种标签：$("ul > a")

基于jQuery实现下拉收缩(展开与折叠)特效

jQuery下拉收缩特效 $(document).ready(function(){ $(".btn-slide").click(function(){ $("#panel").slideToggle("slow"); $(this).toggleClass("active"); return false; }); }); body { margin: 0 auto; padding: 0; width: 570px; fon
基于jQuery代码实现圆形菜单展开收缩效果

废话不多说了,直接给大家贴代码了,具体代码如下所示: <head> <script src="js/jquery.min.js"></script> <script src="js/jquery.menu.js"></script> <style> body { margin:0 auto; background:none repeat scroll 0 0 #FCFCFC } .outer_c
jQuery实现DIV层收缩展开的方法

本文实例讲述了jQuery实现DIV层收缩展开的方法.分享给大家供大家参考.具体实现方法如下: 复制代码代码如下: <!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/xhtm
jQuery 淡入淡出、展开收缩菜单实现代码

效果图:运行以后,刷新下即可. jQuery淡入淡出.展开收缩菜单 ul li{list-style:none;} ul li.menu{position:relative;width:120px;} ul li.menu ul{display:none;text-align:center;background:#fff;border:1px solid #ddd;width:100px;padding:5px;} ul li.menu ul li{padding:5px 0;border-bo
jQuery实现文本展开收缩特效

在网页上只有一个小区域,但是说明性的文字又很长,下面这段脚本实现的是长文字的部分显示. 当用户点击展开时,文字展开,收缩时文字收缩. 本来用jQuery自带的toggle()就可以写,但是我做的时候 toggle一直不work,所以就用了click + 标志位来做的 <script language="javascript" src="jquery.js"></script> <script language="javascr
jQuery图片的展开和收缩实现代码

复制代码代码如下: <!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> <title></title
jquery简单实现网页层的展开与收缩效果

本文实例讲述了jquery简单实现网页层的展开与收缩效果.分享给大家供大家参考.具体如下: 这里演示了jquery网页层展开.层收缩代码,带缓冲动画效果,点击指定的文字或按钮,可展开指定层,再次单击会收起层,类似效果网上已见到许多,请根据自己的需要修改代码,别忘了引入最新的jQuery插件哦. 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
jQuery实现可收缩展开的级联菜单实例代码

如果用纯JavaScript代码而不使用框架的话,那么做一个级联菜单也许是一件让人生畏的事情,但有了框架,这件事情就很容易了,这就是框架的好处,极大地提高了开发效率,并且更可靠和易于维护.使用jQuery来实现级联菜单的一般步骤如下: •1.首先使用<ul>和<li>创建一个级联菜单复制代码代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
Ajax级联菜单实例代码

1.Ajax.html 复制代码代码如下: <!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> <title
React实现antdM的级联菜单实例

目录效果图需求分析 body head 项目结构实现body部分实现head部分整合head与body 效果图需求分析级联菜单分为两部分:head与body. body 包含两部分:已选项列表,候选菜单已选项列表 body展示当前菜单的所有option,可上下滚动. body中选一个option后,会在head的已选列表中进行展示,并且body将显示下一级的菜单. 选中的option,背景色和字体需要改变,以示区分. 候选菜单依次显示每个选中的option,当所有option的
JS实现光滑展开合拢的菜单效果代码

本文实例讲述了JS实现光滑展开合拢的菜单效果代码.分享给大家供大家参考.具体如下: 这是一个光滑展开又合拢的JS菜单效果,无jQuery插件,完全JavaScript代码实现,没有过多修饰,有兴趣的美化一下,肯定是款不错的折叠菜单. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-swift-fade-in-out-menu-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD
JavaScript简单下拉菜单实例代码

本文实例讲述了JavaScript简单下拉菜单实例代码.分享给大家供大家参考.具体如下: 这是一款JavaScript实现的下拉菜单演示代码,带渐变效果的CSS+jQuery菜单,向下滑出型的菜单,最高支持两级,网上常见到的一种菜单风格,希望大家喜欢哦. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-simple-xlcd-down-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C/
jquery实现最简单的滑动菜单效果代码

本文实例讲述了jquery实现最简单的滑动菜单效果代码.分享给大家供大家参考.具体如下: 这是一款最简单的jQuery下拉滑出菜单,jQuery代码实现,这里没有过多的去修饰菜单,仅是一些基本的实现,特别是对学习jQuery是个不错的参考实例,这里使用了一个jquery封装库文件jquery.tools.min.js,从外部引入,测试时候可能会因载入不成功而看不到效果,刷新一下网页即可解决此问题. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/
zTree插件之多选下拉菜单实例代码

zTree插件之多选下拉菜单实例代码css和js 复制代码代码如下: <link rel="stylesheet" type="text/css" href="assets/ztree/css/zTreeStyle.css"><link rel="stylesheet" type="text/css" href="assets/ztre
jQuery实现的淡入淡出二级菜单效果代码

本文实例讲述了jQuery实现的淡入淡出二级菜单效果代码.分享给大家供大家参考.具体如下: 这是一款加入了jQuery的菜单,一个看似平凡菜单突然有味道.有生机起来,这里将jQuery1.3.2引用进来,让弹出的二级菜单具备淡入淡出的效果,虽然就效果本身来说并不起眼,但比起无任何效果的菜单,从体验上来说,已经强了很多倍. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-fade-in-out-2l-nav-menu-codes/ 具
jQuery实现MSN中文网滑动Tab菜单效果代码

本文实例讲述了jQuery实现MSN中文网滑动Tab菜单效果代码.分享给大家供大家参考.具体如下: 这是一款jQuery实现Msn中文网的滑动滑动门代码,利用jQuery实现的效果,代码很巧妙,就是利用一个绝对定位的层来实现移动效果,但是体验度大幅提升了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-f-msn-tab-menu-style-codes/ 具体代码如下: <!DOCTYPE html> <html>
jquery+CSS3模拟Path2.0动画菜单效果代码

本文实例讲述了jquery+CSS3模拟Path2.0动画菜单效果代码.分享给大家供大家参考.具体如下: CSS3实现的仿手机软件菜单,动画菜单,注意的地方,小按钮位移后有个缓冲,每个小按钮缓冲的距离不一样,每个小按钮位移的时间有间隔,处理好这些细节才能体现出灵动的效果. CSS3代码:(请用非IE标准浏览器访问)由于代码运行框缺陷,请先刷新一下页面动画运行更流畅.Path菜单的小按钮本来应该也可以旋转的,但CSS3动画的位移和旋转同时出现时不知道为何旋转就没效果了,所以这里没弄出来,感兴趣的朋

jQuery实现可收缩展开的级联菜单实例代码

相关推荐

随机推荐