JQuery做折叠二级菜单

来源：互联网发布：sql server的实际用途编辑：程序博客网时间：2024/04/30 15:39

今天用JQuery做了一个折叠的二级菜单，以前直接用的Bootstrap插件来做，Boostrap直接封装好了，拿过来用，这次是自己手写，一边借鉴网上的优秀资源，一边自己做的。自我感觉界面交互良好。原来也没有那么难嘛！
（但是写JS的时候获取二级菜单display属性的时候，得到的结果与实际在页面显示的结果相反，不知道为啥。）
**接下来继续优化，做到三级菜单。
希望能封装成小插件，开始自己的JQuery插件库。**
知识总结：
JQuery
运用了Jquery方法有：
show()：元素的显示与隐藏；
addClass():添加一个样式类名；
removeClass();去除一个样式名；
slideToggle();滑动动画显示与隐藏；
siblings()；遍历元素并选择；
slideUp();滑动动画向上滑动

具体JQueryAPI中文文档链接：http://www.jquery123.com/
代码展示：
collapse.html:

<!DOCTYPE html><html><head>    <title>折叠菜单</title>    <meta charset="utf-8">    <link rel="stylesheet" type="text/css" href="collapse.css"></head><body><ul>    <li id="first-floor">        <a href="#" class="first-title">我是一级菜单</a>        <ul id="second-floor">            <li><a href="#" class="second-title">我是二级菜单</a></li>            <li><a href="#" class="second-title">我是二级菜单</a></li>            <li><a href="#" class="second-title">我是二级菜单</a></li>            <li><a href="#" class="second-title">我是二级菜单</a></li>        </ul>    </li>    <li id="first-floor">        <a href="#" class="first-title">我是一级菜单</a>        <ul id="second-floor">            <li><a href="#" class="second-title">我是二级菜单</a></li>            <li><a href="#" class="second-title">我是二级菜单</a></li>            <li><a href="#" class="second-title">我是二级菜单</a></li>            <li><a href="#" class="second-title">我是二级菜单</a></li>        </ul>    </li>    <li id="first-floor">        <a href="#" class="first-title">我是一级菜单</a>        <ul id="second-floor" class="has-children">            <li><a href="#" class="second-title">我是二级菜单</a>                <ul id="third-floor">                    <li><a href="#" class="third-title">我是三级菜单</a></li>                    <li><a href="#" class="third-title">我是三级菜单</a></li>                    <li><a href="#" class="third-title">我是三级菜单</a></li>                </ul>            </li>            <li><a href="#" class="second-title">我是二级菜单</a></li>            <li><a href="#" class="second-title">我是二级菜单</a></li>            <li><a href="#" class="second-title">我是二级菜单</a></li>        </ul>    </li></ul><script type="text/javascript" src="jquery-1.11.2.min.js"></script><script type="text/javascript" src="collapse.js"></script></body></html>

collapse.css:

html,body,ul,li,h1,h2,h3{    padding: 0;    margin: 0;}ul {    list-style: none;}a {    text-decoration: none;}.first-title {    display: block;    width: 200px;    height: 50px;    line-height: 50px;    text-align: center;    background:#1c4275 url(images/pro_left.png) center right no-repeat;    background-color: #1c4275;    font-size: 18px;    color: #9b5900;    font-weight: 700;}.current {    background:#1c4275 url(images/pro_down.png) center right no-repeat;}.first-title:hover {    background-color: #0a3775;    color: #fff;}#second-floor {    display: none;}.second-title {    display: block;    width: 200px;    height: 40px;    line-height: 40px;    text-align: center;    font-size: 16px;    color: #fff;    font-weight: 500;    background-color:#e78300;}.second-title:hover {    color: #fff;    background-color: #9222e7;}#third-floor {    display: none;}.third-title {    display: block;    width: 200px;    height: 30px;    line-height: 30px;    text-align: center;    color: #000;    font-size: 14px;    font-weight: 500;    background-color: #ccc;}.third-title:hover {    color:#ff4c98;     background-color: #eee;}

collapse.js:

$(document).ready(function(){    $("#first-floor #second-floor:eq(0)").show();    $("#first-floor .first-title:eq(0)").addClass("current");    $("#first-floor .first-title").click(function(){        var secondFloor = $(this).next("ul #second-floor");        //为啥跟页面显示情况是相反的display")!="none"？？？        if (secondFloor.css("display")!="none") {            //console.log("none");            $(this).removeClass("current");        }else{            //console.log("block");            $(this).addClass("current");        }           secondFloor.slideToggle(300).siblings("ul #second-floor").slideUp("slow");    });})

0 0