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. 1-2-K Game

    题目链接:https://vjudge.net/contest/330119#problem/E 题目大意可以理解为: 1.给出n个物品以及k,Alice与Bob轮流拿1个,或2个,或k个物品,Ali ...

  2. 基于DBMS_METADATA.GET_DDL函数批量导出索引的创建语句

    /* 首先要说的DBMS_METADATA.GET_DDL是个好函数呀!新项目不知道哪个缺心眼建的同构库,只是见了表结构,并没有健非主键外的索引,领导让追加一版,以前只是会用视图拼sql创建,今天有学 ...

  3. 剑指offer21：第一个序列表示栈的压入顺序，请判断第二个序列是否可能为该栈的弹出顺序。（注意：这两个序列的长度是相等的）

    1 题目描述 输入两个整数序列,第一个序列表示栈的压入顺序,请判断第二个序列是否可能为该栈的弹出顺序.假设压入栈的所有数字均不相等.例如序列1,2,3,4,5是某栈的压入顺序,序列4,5,3,2,1是 ...

  4. Angular CDK Overlay 弹出覆盖物

    为什么使用Overlay? Overlay中文翻译过来意思是覆盖物,它是Material Design components for Angular中针对弹出动态内容这一场景的封装,功能强大.使用方便 ...

  5. [Vue]子组件与父组件之间传值

    1.父组件与子组件传值props 1.1定义父组件,父组件传递 inputText这个数值给子组件: //父组件 //引入的add-widget组件 //使用 v-bind 的缩写语法通常更简单: & ...

  6. js实现div转图片并保存

    最近工作中遇到的需求,将div转成图片并保存. 1.准备需要用到的js插件jquery-1.8.2.js,html2canvas.min.js(将div转换为canvas),bluebird.js(用 ...

  7. 客户端相关知识学习（九）之h5给app传递数据

    方法一: 情况一: if (window.JdAndroid){          window.JdAndroid.setPayCompleted();          window.JdAndr ...

  8. JDK + Tomcat 安装 + 制作自定义镜像【第 1 篇 JDK】

    [第 1 篇 JDK]:https://www.cnblogs.com/del88/p/11842387.html[第 2 篇 Tomcat]:https://www.cnblogs.com/del8 ...

  9. 使用Seaborn展示多变量两两之间的关系

    数据展示: 1. FacetGrid FacetGrid是一个储存我们想怎样展示信息的东西,如下所示,我们想观察位置中SK和GK的分布. 在这里我们使用map方法把数据填充到图表中 计算类别在某一特征 ...

  10. 很low的四位验证码实现

    <html> <head> <meta charset="utf-8"> </head> <body> <inpu ...