JQuery做折叠二级菜单

原创 2016年05月30日 17:43:58

今天用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");
    });
})
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010622874/article/details/51539846

jQuery精讲

精讲jQuery前端技术,让你从此不惧前端处理!
  • 2015年04月23日 11:23

JQuery中鼠标划过一级菜单,有二级菜单的就显示的处理

重点是逻辑,理解了就好了。先直接上html5代码: 鼠标划过一级菜单,有二级菜单的就显示 $(function() { $("li:h...
  • chaplinlong
  • chaplinlong
  • 2016-04-16 00:56:20
  • 4465

Jquery二级菜单的显示

page language="java" contentType="text/html; charset=UTF-8"     pageEncoding="UTF-8"%> DOCTYPE...
  • ljh_learn_from_base
  • ljh_learn_from_base
  • 2017-05-31 02:12:06
  • 277

jquery实现二级菜单下拉效果

实现鼠标悬停菜单时,二级菜单下拉,代码如下所示: 无标题文档 /* reset */ body,ul { margin:0; padding:0; } li { list-style...
  • had_meno
  • had_meno
  • 2016-10-21 14:26:01
  • 138

jQuery做二级菜单动画

鼠标悬浮动态展出二级菜单在网页中非常常见,这里介绍如何用jQuery制作这种效果。相关的知识有: mouseover() mouseout mouseenter() mouseleave() h...
  • shuren1991
  • shuren1991
  • 2017-04-05 21:48:53
  • 443

jQuery UI的简单使用,轻松实现二级菜单

jQuery UI 的API手册地址:http://api.jqueryui.com/        jQuery UI 实现百叶窗效果、菜单、Tab导航;最后组合 百叶窗效果 + 菜单,实现二级菜单...
  • qq_15096707
  • qq_15096707
  • 2016-05-26 10:21:23
  • 2346

jQuery 折叠菜单

本文实例讲述了jQuery实现的简单折叠菜单(折叠面板)效果代码,主要介绍了jQuery实现的简单折叠菜单(折叠面板)效果代码,涉及jQuery中slideToggle与toggleClass方法的灵...
  • xy8199
  • xy8199
  • 2017-10-11 08:56:22
  • 340

jq与JS点击显示隐藏二级菜单的几种方法

喇叭裤 //初始化一个二级菜单显示 短裤1 短裤 短裤 ...
  • SuperCoooooder
  • SuperCoooooder
  • 2016-02-27 15:16:51
  • 9667

jq实现二级下拉菜单动画效果

jq实现二级才拉菜单动画效果
  • qq_37950324
  • qq_37950324
  • 2017-04-16 22:34:49
  • 1163

三种方式实现网页二级菜单

方法一:使用HTML和CSS实现 首先是Html代码,习惯上会将菜单放在一个div里,使用盒子模型,方便以后的操作和设置样式。 二级菜单也就是在一级菜单中的li中再添加一个ul-li结构 ...
  • Bazingaea
  • Bazingaea
  • 2016-11-28 21:18:52
  • 20825
收藏助手
不良信息举报
您举报文章:JQuery做折叠二级菜单
举报原因:
原因补充:

(最多只允许输入30个字)