jQuery 实现手风琴菜单

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 实现手风琴菜单的更多相关文章

简单jQuery 实现手风琴菜单
简单jQuery 实现手风琴菜单 css代码如下: *{ margin: 0; padding: 0; } #accordion{ width: 500px; } #accordion>div ...
jQuery垂直手风琴菜单菜单项带小图标
在线演示本地下载
jQuery简单的手风琴菜单
查看效果:http://keleyi.com/keleyi/phtml/menu/5.htm 本菜单的HTML代码和JS代码都简洁,完整源代码: <!DOCTYPE html PUBLIC &q ...
jQuery手风琴菜单！！！！
jQuery手风琴菜单第一次发博客也不知道说点什么好,以前敲得一个手风琴菜单刚刚整理出来了,就来分享个大家手风琴的排版排版完事了,接下来就写样式吧,把自己喜欢的颜色或者是图片添加进来,就会变成你 ...
Angular.js+Bootstrap实现手风琴菜单
说是Angular.js+Bootstrap实现手风琴菜单,其实就是用了Bootstrap的样式而已. 上一篇实现了表格+分页,接着学习实现的Demo. 主要练习自定义指令,向指令中传递参数,老规矩先 ...
19款绚丽实用的jQuery/CSS3侧边栏菜单
jQuery作为一款主流的JavaScript前端开发框架,深受广告开发者的亲睐,同时jQuery有着不计其数的插件,特别是菜单插件更为丰富,本文将要为大家介绍20个绚丽而实用的jQuery侧边栏菜单 ...
jquery多级手风琴插件–accordion.js
手风琴菜单一般用于下拉导航,由于外观非常简洁,使用起来跟手风琴一样可以拉伸和收缩而得名,项目中适当应用手风琴效果会给用户带来非常好的体验.本文借助jQuery插件轻松打造一个非常不错的手风琴效果的菜单 ...
UIKit的手风琴菜单，单条展开和多条同时展开
这个也要进来看看哈. 记得加多个属性时的用法就可以了. 因为官网提供太多的SAPMLE啦.. http://www.getuikit.net/docs/accordion.html <div c ...
近20个绚丽实用的jQuery/CSS3侧边栏菜单（转载）
http://developer.51cto.com/art/201510/493530.htm 近20个绚丽实用的jQuery/CSS3侧边栏菜单 jQuery作为一款主流的JavaScript前端 ...

随机推荐

POJ 2195 Going Home 【最小费用最大流】
题目链接:http://poj.org/problem?id=2195 Time Limit: 1000MS Memory Limit: 65536K Total Submissions:2715 ...
linux tcp listen函数的参数backlog
1 listen函数(http://man7.org/linux/man-pages/man2/listen.2.html) int listen(int sockfd, int backlog); ...
k8s-搭建 EFK 日志系统
搭建 EFK 日志系统大家介绍了 Kubernetes 集群中的几种日志收集方案,Kubernetes 中比较流行的日志收集解决方案是 Elasticsearch.Fluentd 和 Kibana( ...
C#数字前补0
[TestMethod] public void Test8() { ; string b = string.Format("{0:000000}", a); , '); }
Js 判断数组中是否包含某个值
includes() 方法用来判断一个数组是否包含一个指定的值,如果是返回 true,否则false. JavaScript Array includes() 方法
C# 中使用正则表达式 Regex.Matches方法的几个应用[转]
用于正则表达式的 Regex.Matches静态方法的几种用法: //①正则表达式 = > 匹配字符串 string Text = @"This is a book , this is ...
Web API与MVC控制器的区别
Web API属于ASP.NET核心平台的一部分,它利用MVC框架的底层功能方便我们快速的开发部署WEB服务.我们可以在常规MVC应用通过添加API控制器来创建web api服务,普通MVC应用程序控 ...
微信小程序wxs如何使用
新建一个.wxs文件  <wxs module="filter" src=&q ...
easyui的combobox默认选中第一个选项
pmProjectSelect.combobox({ editable:false, width:165, url : ctx + '/PmProject/findByProjectMgr', //c ...
Vue Elementui中的Tag与页面其它元素相互交互
参考:https://www.jb51.net/article/147917.htm 思路一.多选框勾选,出现对应的tag: 1.利用watch监听多选框绑定的值A(数组)的变化:2.根据A的变化, ...

jQuery 实现手风琴菜单

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

随机推荐

热门专题