jquery树形菜单

最新推荐文章于 2024-09-09 15:53:30 发布
最新推荐文章于 2024-09-09 15:53:30 发布
阅读量4.5k 收藏
点赞数
分类专栏： javaScript 文章标签： jquery function class stylesheet 浏览器 

文件清单：
       menu.jsp        ----菜单JSP页面
       jquery.js         ----JQuery源文件JS
       menu.js          ----菜单使用的JS
       style.css          ----菜单样式文件
menu.jsp源文件，如下：
<%@ pagelanguage="java" import="java.util.*"pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>JQuery[菜单效果]</title>
        <link rel="stylesheet" type="text/css" href="style.css"/>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript" src="menu.js"></script>
    </head>
    <body>
        <ul>
            <li class="mainMenu">
                <a href="#">机构管理</a>
                <ul>
                    <li><a href="#">添加机构</a></li>
                    <li><a href="#">修改机构</a></li>
                    <li><a href="#">查询机构</a></li>
                </ul>
            </li>
            <li class="mainMenu">
                <a href="#">部门管理</a>
                <ul>
                    <li><a href="#">添加部门</a></li>
                    <li><a href="#">修改部门</a></li>
                    <li><a href="#">查询部门</a></li>
                </ul>
            </li>
            <li class="mainMenu">
                <a href="#">员工管理</a>
                <ul>
                    <li><a href="#">添加员工</a></li>
                    <li><a href="#">修改员工</a></li>
                    <li><a href="#">查询员工</a></li>
                </ul>
            </li>
        </ul>
        <br/>
        <hr/>
        <br/>
        <ul>
            <li class="crossMenu">
                <a href="#">机构管理</a>
                <ul>
                    <li><a href="#">添加机构</a></li>
                    <li><a href="#">修改机构</a></li>
                    <li><a href="#">查询机构</a></li>
                </ul>
            </li>
            <li class="crossMenu">
                <a href="#">部门管理</a>
                <ul>
                    <li><a href="#">添加部门</a></li>
                    <li><a href="#">修改部门</a></li>
                    <li><a href="#">查询部门</a></li>
                </ul>
            </li>
            <li class="crossMenu">
                <a href="#">员工管理</a>
                <ul>
                    <li><a href="#">添加员工</a></li>
                    <li><a href="#">修改员工</a></li>
                    <li><a href="#">查询员工</a></li>
                </ul>
            </li>
        </ul>
    </body>
</html>
style.css样式源文件，如下：
/*菜单样式：2010-11-24*/
UL,LI{
    /*去掉小圆点*/
    list-style: none;
}
UL{
    /*清除子菜单缩进*/
    padding: 0;
    /*但IE浏览器不能缩进*/
    margin: 0;
}
/*主菜单样式*/
.mainMenu,.crossMenu{
    /*字体大小*/
    font-size: 12px;
    /*添加背景图片*/
    background-image: url(../../resources/images/title.gif);
    /*背景图横向重复*/
    background-repeat: repeat-x;
    /*主菜单宽度*/
    width: 70px;
}
/*子菜单样式*/
LI{
    /*背景色*/
    background-color: #EEEEEE;
}
A{
    /*取消链接的下划线*/
    text-decoration: none;
    /*子菜单缩进*/
    padding-left: 15px;
    /*让连接充满区域，及菜单边缘也可以点击
    *   问题：如果值为block,IE会出现问题，
    *   不能填充，且子菜单会变样，因此我们
    *   用 inline解决，但是不能解决填充，
    *   因此加上宽度(70 - 15)
    */
    display: block;
    display: inline;
    width: 70px;
    /*在所有的链接加3个像素的上边距和下边距*/
    padding-top: 3px;
    padding-bottom: 3px;
}
.mainMenu A,.crossMenu A{
    /*主菜单链接为白色*/
    color: white;
    /*链接背景图片*/
    background-image: url(../../resources/images/collapsed.gif);
    /*背景图不重复*/
    background-repeat: no-repeat;
    /*背景箭头的位置*/
    background-position: 2px center;
}
.mainMenu LI A,.crossMenu LI A{
    /*子菜单链接文字为黑色*/
    color: black;
    /*去掉子菜单背景箭头*/
    background-image: none;
}
/*主菜单下的UL全部隐藏*/
.mainMenu UL,.crossMenu UL{
    display: none;
}
/*横向菜单*/
.crossMenu{
    /*横向排列*/
    float: left;
    /*字体大小*/
    font-size: 12px;
}
menu.js源文件，如下：
$(
    function()
    {
        /**
         * 如果使用.mainMenu a选择器，会
         * 出现点击子菜单也会触发click事件
         * 解决方法：使用JQuery的特有方式
         * .mainMenu > a
         * */
        $('.mainMenu > a').click(
            function()
            {
                //找到主菜单项的子菜单项
                var childMenu = $(this).next('ul');
                /*常规方法*/
                /*
                if('none'== childMenu.css('display'))
                {
                    childMenu.css('display','block');
                }
                else
                {
                    childMenu.css('display','none');
                }
                */
                /*使用JQuery的方法
                 * 数值为毫秒
                 * 文字：slow/normal,fast*/
                //childMenu.show(100);
                //childMenu.show('normal');
                //childMenu.hide(100);
                //省去if else 判断
                //childMenu.toggle('normal');
                //卷帘效果，也支持参数
                //childMenu.slideDown();
                //childMenu.slideUp();
                //省去if else 判断
                childMenu.slideToggle();
                changeIcon($(this));
            }
        );
        //处理横向菜单
        /*
        $('.crossMenu> a').hover(
            function()
            {
                $(this).next('ul').slideDown();
            },
            function()
            {//但是鼠标移到子菜单，会有bug,子菜单消失
                //$(this).next('ul').slideUp();
                //首先得到子菜单
                varchildMenu = $(this).next('ul');
                //解决方法，延时处理(300ms)
                vartimeOutID = setTimeout(
                    function()
                    {
                        $(this).next('ul').slideUp();
                    },300
                );
                childMenu.hover(
                    function()
                    {
                        //删除父菜单的延时
                        clearTimeout(timeOutID);
                    },
                    function()
                    {//但此时还是有问题，走了很多弯路
                        $(this).slideUp();
                    }
                );
            }
        );
        */
        $('.crossMenu').hover(
            //自己判断
//          function()
//          {
//              $(this).children('ul').slideDown();
//          },
//          function()
//          {
//              $(this).children('ul').slideUp();
//          }
            //卷帘效果
            function()
            {
                $(this).children('ul').slideToggle();
                changeIcon($(this).children('a'));
            }
        );
    }
);
/*修改主菜单的指示图标*/
functionchangeIcon(mainNode)
{
    if(mainNode)
    {
        if(mainNode.css('background-image').indexOf('collapsed.gif') >= 0)
        {
            mainNode.css('background-image', 'url(resources/images/expanded.gif)');
        }
        else
        {
            mainNode.css('background-image', 'url(resources/images/collapsed.gif)');
        }
    }
}
       
小结：
A部分
①    页面中的菜单可以通过嵌套ul和li来表示；
②    菜单最外层为ul，一层每个主菜单放在一个li中，如果有子菜单，在这个主菜单的li中建立新的ul，再依次嵌套即可构件多层的菜单；
③    浏览器中ul和li元素默认情况下文字前都有圆点标识符，li元素会有缩进.Opera浏览器比较特殊，li的标志符号和其他浏览器不同；
④    list-style属性值为none时，可以清除ul和li前的小圆点
⑤    清除子菜单的缩进值，需要padding和margin都为0，其中IE只有margin也为0时才可以清除缩进值；
⑥    可以使用background-image来指定一个元素的背景图，如果背景图比元素的实际大小要小，那么背景图会自动在横向和纵向上重复显示，直到填满整个区域；
⑦    可以使用background-repeat来控制背景图的重复填充方式；
⑧    如果一个元素上同时定义了背景图和背景色，那么有背景图的地方是不会显示背景色的；
⑨    text-decoration属性值为none时，可以取消链接A文字下方的下划线；
⑩    background-position可以控制背景图的位置，属性值既可以用数值，也可以使用center,left,top这些值来控制横向和纵向的位置。这个属性的两个值，第一个对应横向，第二个对应纵向；
B部分
 
①    background-image的值为none表示没有背景图；
②    background-repeat的值为no-repeat时，背景图不会在所在的区域中重复显示；
③    display的值为none可以用来隐藏元素；
④    .mainMenu a 和 .mainMenu > a 的不同之处，前者选择使用了.mainMenu的这个class的元素内部所有的a节点，后者只选择.mainMenu的子节点中的a节点；
⑤    show(),hide()方法可以用于显示或隐藏元素，没有参数的效果和修改css的display属性效果一样。参数可以是以毫秒为单位的数值，或者是’slow’,’normal’,fast’,都可以控制完成显示或隐藏需要的时间。注意这时动画效果是靠不断改变元素的宽度和高度来实现的。
⑥    toggle方法更为强大，可以省去判断元素是否显示、隐藏，直接让显示的元素隐藏起来，隐藏的元素显示出来。参数使用方法和show()和hide()相同；
⑦    slideDown、slideUp可以实现向下或向上卷动的效果，实际上是通过制定时间内修改元素的高度来实现动画效果。需要注意的是这两个方法参数如果为空的情况下和show()，hide()不同；
⑧    slideToggle和toggle达到类似的效果；
⑨    DOCTYPE对于JQuery的动画效果是有影响的。没有DOCTYPE定义时，在IE中，JQuery的动画会出现闪烁的糟糕效果；
⑩    Float的值为left，可以使原本各自位于一行的元素全部在一行中向左浮动；
C部分
①    可以给多个选择器定义同样的样式，选择器之间用，分割。同样对于JQuery的$（）方法，也可以传入多个选择器。


Melody_^_^
关注
专栏目录
jquery 树形菜单
11-02
描述中提到的“初步实现的代码修改版本”，暗示这个项目基于一个基础的jQuery树形菜单实现，并进行了改进。其中，“增加了文字点击函数”意味着当用户点击菜单项的文字时，将触发特定的事件或功能，这可能包括跳转...
jQuery实现树形菜单的三种方法
有点儿文绉绉的小赖的博客
07-26 5400
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;树形菜单&lt;/title&gt; &lt;script type="text/javascript" src="../js/jquery-1.8.3.js"&am
jQuery制作树形图（多级菜单）
qq_45587547的博客
09-06 739
【代码】jQuery制作树形图（多级菜单）
WPF 保姆级教程怎么实现一个树形菜单
最新发布
kfashfasf的博客
09-09 1224
我们取名为bd1的border，最开始的Visibility设置的是Hidden,我们替换一下关于Bd的trigger，让它变成当IsSelected是true的情况下，让bd1的Visibility变成Visible.记得修改一下自己的项目名字，我取的是TreeViewDemo，改成自己的项目名就好了，最后的结尾，是FatSheep，记得改成自己的ICON项目名称。再运行一下项目，它就差不多实现我们想要的效果了,现在再去找领导交差，领导还会夸你做的不错，只是还差一个图标了，这个就是锦上添花的东西了.
JQ实现树形菜单
柚稚的博客
07-07 1198
需求 使用JQ实现简单树形菜单，点击展开收起，关键点有以下几点 1、数据格式要正确 2、树形结构主要是用了递归函数来进行的DOM渲染 3、JQ拼接字符串的方式 代码 递归的部分有两个方法，一个是使用比较常见的for循环，另一个是使用forEach,使用使用forEach会简洁一些。以下为使用for循环的代码部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <
jQuery 树型菜单完整代码
xiaowude_boke的博客
11-17 390
jquery 树形菜单实现
用jquery实现的简单树状菜单
lipingqingqing的专栏
07-16 1378
用jquery实现的简单树状菜单，主要使用了jQuery的nextAll()（查找当前元素之后所有的同辈元素）与toggle()（切换元素的可见状态。如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。）方法。Code:       服装分类管理    "text/css" rel="stylesheet" href="s
jquery树形菜单效果的简单实例
10-22
1. jQuery树形菜单的核心代码： 文档中首先引入了jQuery库以及一个名为"jquery.tree.js"的插件，这是实现树形菜单的关键。接着通过一个简单的jQuery脚本来初始化树形菜单，并设置首次展开的节点。 2. HTML结构设计...
jquery树形菜单例子
11-23
本示例聚焦于“jQuery树形菜单”，这是一种常见的用户界面元素，常用于网站导航、文件目录展示或者层级数据的可视化。 首先，让我们深入理解“树形菜单”。树形菜单，顾名思义，是以树状结构展示信息的菜单。它由...
jQuery树形菜单打开标签特效代码
03-20
**jQuery树形菜单打开标签特效代码详解** 在网页设计中，树形菜单是一种常见的组织和展示数据的方式，尤其适用于层级关系复杂的内容。jQuery作为一个轻量级的JavaScript库，提供了丰富的功能来实现各种交互效果，...
jQuery树形菜单插件多级菜单选中代码
10-25
总的来说，创建一个jQuery树形菜单插件并处理多级菜单的选中状态，需要理解HTML结构、jQuery选择器和事件处理，以及CSS类的应用。通过熟练掌握这些技术，你可以为网站提供更加友好的用户界面和交互体验。
基于jquery实现无限级树形菜单
11-27
本文实例为大家分享了基于jquery实现无限级树形菜单效果，具有一定的参考价值，具体内容如下 效果图： 实现代码： <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无限级树形菜单</title> </head> [removed][removed] <style> ul.a{width:100%;cursor:pointer;padding:0 0px;color:white;} ul.a li{list-style-
jQuery实现树形结构菜单
赵佳敏的博客
12-02 1550
一、效果图 二、核心代码 树形结构菜单.html <script src="js/treemenu.js"></script> <script> //插件中的方法使用和配置 //使用Ajax后端返回菜单的数据 //下面用户可能设置相关配置 $("#menu").Init({ backGround: "#4667d8", color: '#fff', data: menu .
jQuery实现树形菜单
许达华的博客
08-18 4595
jQuery实现树形菜单 html代码： 树形菜单 中国人民 中国人民 中国人民 中国人民 加油香港 ...
2022-06-11 jQuery案例:树状菜单(以树状结构展开和折叠的菜单和其子菜单)
GAARA
06-11 572
思路 1.ul>li前的"+“,”-"号使用伪元素选择器::before{}添加,如在正式网页中,可以用iconfont图标,达到更好的视觉效果 2.点击展开和折叠不用display:block和none,而是用slideToggle(),效果更好 3.为ul>li绑定点击事件后,点击一个li就让其子元素ol展开和折叠,若只允许展开一个li,则让当前li的所有表兄弟都向上折叠即可
使用jQuery制作树形菜单
My_name_is_ZwZ的博客
10-28 568
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;script src="js/jquery.min.js" type="text/javascript" char
jQuery树形菜单
wolfxman的专栏
01-14 459
项目之余写一个简单的树形菜单，作为记录，以后再用到的时候可以参考。 代码： 树形菜单 #content{   position: absolute;   top: 0px;   left: 0px;   background: #FAFAFA;   width: 200px;   height: 100%; } #treeDiv{   positio
jquery——8树形菜单
inexaustible的博客
12-04 196
案例： 目的：有展开有收起的树形菜单 1.1做一个静态页面的效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jquery_10_demo</title> ...
树状菜单（利用映射-bootstrap+jQuery实现折叠功能）
ioncannontic的博客
02-11 566
树状菜单（利用映射-bootstrap+jQuery实现折叠功能）
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值