main.js

$(function(){

  var tmp = null,

    $title = $('.title'),

    $con = $('.title > ul');

  $title.click(function(){

    $(tmp).children('ul').slideUp().end().children('.arrow').removeClass('arrow-up');

    $(this).children('ul').slideToggle().end().children('.arrow').addClass('arrow-up');

    tmp = this;

  });

  $con.click(function(){

    return false;  // 阻止事件冒泡

  });

});

index.html

<!DOCTYPE html>

<html lang="en">

<head>

  <title>jquery js css html</title>

  <meta charset="utf-8" />

  <link rel="stylesheet" href="css/style.css" />

</head>

<body>

  <!--sidebar-->

  <div class="sidebar">

    <ul>

      <li class="title"><span>计算机学院</span><span class="arrow"></span>

        <ul class="in-sidebar">

          <li><a target="_blank" href="http://www.jiuni.com.cn">计算机科学与工程</a></li>

          <li><a href="#">通信工程</a></li>

          <li><a href="#">软件工程</a></li>

          <li><a href="#">物联网工程</a></li>

          <li><a href="#">网络工程</a></li>

        </ul>

      </li>

      <li class="title"><span>机械学院</span><span class="arrow"></span>

        <ul class="in-sidebar">

          <li><a href="#">机电工程</a></li>

          <li><a href="#">机械工程</a></li>

          <li><a href="#">工业工程</a></li>

          <li><a href="#">工业设计</a></li>

          <li><a href="#">机械设计</a></li>

        </ul>

      </li>

      <li class="title"><span>土木学院</span><span class="arrow"></span>

        <ul class="in-sidebar">

          <li><a href="#">土木工程</a></li>

          <li><a href="#">建筑设计</a></li>

          <li><a href="#">工程管理</a></li>

          <li><a href="#">给排水工程</a></li>

        </ul>

      </li>

      <li class="title"><span>经管学院</span><span class="arrow"></span>

        <ul class="in-sidebar">

          <li><a href="#">金融工程</a></li>

          <li><a href="#">经济管理</a></li>

          <li><a href="#">会计</a></li>

          <li><a href="#">审计</a></li>

          <li><a href="#">工商管理</a></li>

        </ul>

      </li>

      <li class="title"><span>外国语许愿</span><span class="arrow"></span>

        <ul class="in-sidebar">

          <li><a href="#">英语系</a></li>

          <li><a href="#">日语系</a></li>

          <li><a href="#">德语系</a></li>

          <li><a href="#">俄罗斯语</a></li>

        </ul>

      </li>

    </ul>

  </div>

  <script src="js/jquery-1.12.4.min.js"></script>

  <script src="js/main.js"></script>

</body>

</html>

style.css

/*globle*/

ul, li{

  margin:;

  padding:;

  list-style-type: none;

}

a{

  display: inline-block;

  width: 100%;

  height: 31px;

  text-decoration: none;

  color: #fff;

  font-size: 13px;

}

a:hover{

  background: #52718A;

}

/*sidebar*/

.sidebar{

  width: 210px;

  height: 335px;

  margin: 50px auto;

  border-radius: 5px;

  font: 14px '新宋体';

  color: #f4f4f4;

}

.title{

  width: 95%;

  line-height: 32px;

  border-bottom: 1px solid #ccc;

  background: #1ABC9C;

  cursor: pointer;

}

.title > span{

  margin-left: 10px;

}

/*in-sidebar*/

.in-sidebar{

  width: 100%;

  display: none;

}

.in-sidebar > li{

  width: 100%;

  height: 32px;

  background: #34495E;

  line-height: 32px;

  text-align: center;

  border-bottom: 1px solid #ddd;

}

/*arrow*/

.arrow{

  float: right;

  display: inline-block;

  margin-right: 5px;

  width: 20px;

  height: 32px;

  background: url(../img/down.png) no-repeat center;

}

.arrow-up{

  background: url(../img/up.png) no-repeat center;

}

效果图

jQuery 实现手风琴菜单的更多相关文章

  1. 简单jQuery 实现手风琴菜单

    简单jQuery 实现手风琴菜单 css代码 如下: *{ margin: 0; padding: 0; } #accordion{ width: 500px; } #accordion>div ...

  2. jQuery垂直手风琴菜单 菜单项带小图标

    在线演示 本地下载

  3. jQuery简单的手风琴菜单

    查看效果:http://keleyi.com/keleyi/phtml/menu/5.htm 本菜单的HTML代码和JS代码都简洁,完整源代码: <!DOCTYPE html PUBLIC &q ...

  4. jQuery手风琴菜单！！！！

    jQuery手风琴菜单 第一次发博客也不知道说点什么好,以前敲得一个手风琴菜单刚刚整理出来了,就来分享个大家 手风琴的排版 排版完事了,接下来就写样式吧,把自己喜欢的颜色或者是图片添加进来,就会变成你 ...

  5. Angular.js+Bootstrap实现手风琴菜单

    说是Angular.js+Bootstrap实现手风琴菜单,其实就是用了Bootstrap的样式而已. 上一篇实现了表格+分页,接着学习实现的Demo. 主要练习自定义指令,向指令中传递参数,老规矩先 ...

  6. 19款绚丽实用的jQuery/CSS3侧边栏菜单

    jQuery作为一款主流的JavaScript前端开发框架,深受广告开发者的亲睐,同时jQuery有着不计其数的插件,特别是菜单插件更为丰富,本文将要为大家介绍20个绚丽而实用的jQuery侧边栏菜单 ...

  7. jquery多级手风琴插件–accordion.js

    手风琴菜单一般用于下拉导航,由于外观非常简洁,使用起来跟手风琴一样可以拉伸和收缩而得名,项目中适当应用手风琴效果会给用户带来非常好的体验.本文借助jQuery插件轻松打造一个非常不错的手风琴效果的菜单 ...

  8. UIKit的手风琴菜单，单条展开和多条同时展开

    这个也要进来看看哈. 记得加多个属性时的用法就可以了. 因为官网提供太多的SAPMLE啦.. http://www.getuikit.net/docs/accordion.html <div c ...

  9. 近20个绚丽实用的jQuery/CSS3侧边栏菜单（转载）

    http://developer.51cto.com/art/201510/493530.htm 近20个绚丽实用的jQuery/CSS3侧边栏菜单 jQuery作为一款主流的JavaScript前端 ...

随机推荐

  1. 最新 用友网络java校招面经 （含整理过的面试题大全）

    从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿.用友网络等10家互联网公司的校招Offer,因为某些自身原因最终选择了用友网络.6.7月主要是做系统复习.项目复盘.Leet ...

  2. fatal error C1189: #error : Building MFC application with /MD[d] (CRT dll version) requires MFC sha

    调试程序时出现以下问题:d:\program files (x86)\microsoft visual studio 10.0\vc\atlmfc\include\afx.h(24): fatal e ...

  3. [转帖]Linux-Windows 端口转发 netsh 还有 rinetd

    Linux-Windows 端口转发 https://www.cnblogs.com/operationhome/p/11284559.html 之前自己学习过 netsh 也曾经用过frp 这次学习 ...

  4. 飞腾1500A 上面银河麒麟操作系统 进行远程以及添加用户的方法 linux xrdp

    1. 安装远程用的软件: sudo apt-get install xrdp vnc4server xbase-clients systemctl enable xrdp systemctl star ...

  5. ROS的初步学习--创建一个工作空间和一个程序包

    快速开始 创建工作区(workspace) 工作区可以作为一个独立的项目进行编译,存放ROS程序的源文件.编译文件和执行文件.建立工作区的方法如下: mkdir -p ~/catkin_ws/src ...

  6. codeforces 1251D Salary Changing （二分+贪心）

    (点击此处查看原题) 题意分析 一共有s元钱,要用这些钱给n个人发工资,发给每个人的工资si有最少和最多限制 si ∈[li,ri],在发给n个人的总工资小于s的情况下,要求发给n个人中的工资的中位数 ...

  7. k8s-日志收集架构

    日志收集 Kubernetes 集群中监控系统的搭建,除了对集群的监控报警之外,还有一项运维工作是非常重要的,那就是日志的收集. 介绍 应用程序和系统日志可以帮助我们了解集群内部的运行情况,日志对于我 ...

  8. 一次解决黑帽SEO的经历

    最近有个朋友跟我说他的网站被黑了,百度快照里显示的是另一个网站,如: 于是查找了些资料,终于找到了问题所在,记录如下: 关于黑帽SEO1.暗链:其实“暗链”就是看不见的网站链接,“暗链”在网站中的链接 ...

  9. html5中本地存储概念是什么？

    html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage.sessionStorage用于本地存储一个会话中的数据,这些数据只有在同一个会话中的页 ...

  10. flutter主题颜色

    主题色 右下角的FloatingActionButton的颜色就是默认取值MaterialColor, 默认是蓝色的,如果修改成primarySwatch,就会变成这个颜色值. 一.primarySw ...