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. 告诉你：DOS系统实例手册系列专辑连载中

    DOS系统实例手册系列专辑连载中 内容提要:

  2. Python初始

    一,Python介绍 1.Python简介 python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆(中文名字:龟叔)为了在阿姆斯特丹打发时间, ...

  3. textarea文本域轻松实现高度自适应

    转载:http://www.xuanfengge.com/textarea-on-how-to-achieve-a-high-degree-of-adaptive.html 今天需要些一个回复评论的页 ...

  4. Python解Leetcode： 725. Split Linked List in Parts

    题目描述:给定一个单链表,写一个函数把它分成k个单链表.分割成的k个单链表中,两两之间长度差不超过1,允许为空.分成的k个链表中,顺序要和原先的保持一致,比如说每个单链表有3个结点,则第一个单链表的结 ...

  5. python 定时爬取内容并发送报告到指定邮箱

    import requests import smtplib import schedule import time from bs4 import BeautifulSoup from email. ...

  6. spring boot logback无感配置

    spring boot1.5.x版本的日志配置一直有一个问题,就是不能直接通过yml配置文件进行日志文件大小进行动态和方便的配置. 怎么解决?直接在springboot项目的maven工程中的src/ ...

  7. Java门面模式（思维导图）

    图1 门面模式[点击查看图片] 1,实体对象类 package com.cnblogs.mufasa.demo1; //3个子系统,解决问题的实体 public class StoreA { //示意 ...

  8. Css文字在div中自动换行

    Css文字在div中自动换行 word-break:break-all; 文字在div中字段换行

  9. SQL Prompt 注册后隔一段时间莫名无法使用的处理

    https://blog.csdn.net/anyqu/article/details/88537197 以前一直以为是授权丢了,反复重装也解决不了 Sql Prompt---Unable to co ...

  10. StoneTab标签页CAD插件 3.2.2

    //////////////////////////////////////////////////////////////////////////////////////////////////// ...