jq无限极下拉菜单和点击展开菜单

最新推荐文章于 2023-07-28 15:50:21 发布

noxLiu

最新推荐文章于 2023-07-28 15:50:21 发布

阅读量4.6k

点赞数 1

分类专栏： js 文章标签：菜单

js 专栏收录该内容

75 篇文章 1 订阅

订阅专栏

一、html部分

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link type="text/css" rel="stylesheet" href="menu.css" />  
    <script type="text/javascript" src="jquery-2.1.3.min.js"></script>  
    <script type="text/javascript" src="menu.js"></script> 
</head>
<body>  
        <ul>  
            <li class="main">  
                    <a href="#">菜单项1</a>  
                <ul style="display:none;">  
                    <li>  
                        <a href="#">子菜单项11</a>  
                    </li>  
                    <li>  
                        <a href="#">子菜单项12</a>  
                    </li>  
                </ul>  
            </li>  
            <li class="main">  
                <a href="#">菜单项2</a>  
                <ul>  
                    <li>  
                        <a href="#">子菜单项21</a>  
                    </li>  
                    <li>  
                        <a href="#">子菜单项22</a>  
                    </li>  
                </ul>  
            </li>  
            <li class="main">  
                <a href="#">菜单项3</a>  
                <ul>  
                    <li>  
                    <a href="#">子菜单项31</a>  
                    </li>  
                    <li>  
                        <a href="#">子菜单项32</a>  
                    </li>  
                </ul>  
            </li>  
        </ul>  
          
        <br/>  
        <ul>  
            <li class="hmain">  
                <a href="#">菜单项1</a>  
                <ul>  
                    <li>  
                        <a href="#">子菜单项11</a>  
                    </li>  
                    <li>  
                        <a href="#">子菜单项12</a>  
                    </li>  
                </ul>  
            </li>  
            <li class="hmain">  
                <a href="#">菜单项2</a>  
                <ul>  
                    <li>  
                        <a href="#">子菜单项21</a>  
                    </li>  
                    <li>  
                        <a href="#">子菜单项22</a>  
                    </li>  
                </ul>  
            </li>  
            <li class="hmain">  
                <a href="#">菜单项3</a>  
                <ul>  
                    <li>  
                    <a href="#">子菜单项31</a>  
                    </li>  
                    <li>  
                        <a href="#">子菜单项32</a>  
                    </li>  
                </ul>  
            </li>  
        </ul>  
          
    </body>
    </html>

二、css部分

ul,li{  
    list-style:none;/* //清除ul和li上默认的小圆点 */  
  
}  
ul{  
    /* 清除子菜单的缩进值 */  
    padding:0;  
    margin:0;  
}  
.main,.hmain{  
    background-image:url(../images/title.gif);/*指定背景图*/  
    background-repeat:repeat-x;  
    width:120px;  
}  
li{  
    background-color:#EEEEEE;  
}  
a {  
    /*取消所有的下划线*/  
    text-decoration:none;  
    padding-left:20px;   
     display:block;  
    display:inline-block;/* 解决ie6不兼容的问题 */   
    width:100px;  
    padding-top:3px;  
    padding-bottom:3px;  
}  
.main a,.hmain a {  
    color:white;/*主菜单标签颜色为白色*/  
    background-image:url(../images/collapsed.gif);  
    background-repeat:no-repeat;  
    background-position:3px center; /* 图片位置在中间 */  
}  
.main li a ,.hmain li a{  
    /* 子菜单项 */  
    color:black;  
    background-image:none;/* 不使用图片 */  
    padding-left:18px;   
      
}  
.main ul,.hmain ul{  
    /* 子菜单隐藏 */  
     display:none;   
}  
.hmain{  
    float:left;/*浮动显示*/  
    margin:1px;  
}

三、js部分

$(document).ready(function(){  
    //页面的Dom已经装载完成时，执行的代码  
     $(".main > a,.hmain a").click(function(){  
         //找到主菜单项对应的子菜单项  
        var ulNode = $(this).next("ul");  
        // //根据情况收缩菜单  
        // if(ulNode=$.css("display") == "none"){  
            // ulNode.css("display","block");  
        // }else{  
            // ulNode.css("display","none");  
        // }  
          
        // ulNode.show("normal");//设置展开的速度，可以是nomal,slow,fast  
        // ulNode.hide();  
         // ulNode.toggle();//toggle设置展开或者收缩  
        //卷帘效果，向上或者向下  
        // ulNode.slideDown();  
        // ulNode.slideUp;  
        ulNode.slideToggle();  
    });  
    //麻烦的方法  
    // $(".hmain > a").hover(function(){  
        // $(this).next("ul").slideDown();  
    // }.Function(){  
        // var ulNode=$(this).next("ul");  
        // var timeoutId =setTimeout(function(){  
          
// })         
            // ulNode.slideUp();  
    // },300);  
    // ulNode.hover(function(){  
        // clearTimeout(timeoutId);  
    // }.function(){  
        // $(this).slideUp();  
    // });  
  
    /********实现鼠标移动到指定主菜单后子菜单自动显示*****/  
      
    $(".hmain").hover(function(){  
        $(this).children("ul").slideDown();  
    },function(){  
        $(this).children("ul").slideUp();  
    });  
      
});  
   /* 
    *修改主菜单的指示图标随着子菜单的变化而变化 
    * 
    */  
function changeIcon(mainNode) {  
    if (mainNode) {  
        if (mainNode.css("background-image").indexOf("collapsed.gif") >= 0) {  
            mainNode.css("background-image","url('images/expanded.gif')");  
        } else {  
            mainNode.css("background-image","url('images/collapsed.gif')");  
        }  
    }  
}