jQuery制作效果超棒的手风琴折叠菜单


Posted in Javascript onApril 03, 2015

拉风的jQuery制作的手风琴折叠菜单,效果非常不错!这里是之前版本的改进版,主要是jquery代码改进

演示图:

jQuery制作效果超棒的手风琴折叠菜单

jQuery制作效果超棒的手风琴折叠菜单

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>一、HTML5基础教程</span><span class="arrow"></span>
        <ul class="in-sidebar">
          <li><a target="_blank" href="http://www.jiuni.com.cn">HTML5基础教程1</a></li>
          <li><a href="#">HTML5基础教程2</a></li>
          <li><a href="#">HTML5基础教程3</a></li>
          <li><a href="#">HTML5基础教程4</a></li>
          <li><a href="#">HTML5基础教程5</a></li>
        </ul>
      </li>
      <li class="title"><span>二、CSS3基础教程</span><span class="arrow"></span>
        <ul class="in-sidebar">
          <li><a href="#">CSS3基础教程1</a></li>
          <li><a href="#">CSS3基础教程2</a></li>
          <li><a href="#">CSS3基础教程3</a></li>
          <li><a href="#">CSS3基础教程4</a></li>
          <li><a href="#">CSS3基础教程5</a></li>
        </ul>
      </li>
      <li class="title"><span>三、Javascript基础教程</span><span class="arrow"></span>
        <ul class="in-sidebar">
          <li><a href="#">Javascript基础教程1</a></li>
          <li><a href="#">Javascript基础教程2</a></li>
          <li><a href="#">Javascript基础教程3</a></li>
          <li><a href="#">Javascript基础教程4</a></li>
          <li><a href="#">Javascript基础教程5</a></li>
        </ul>
      </li>
      <li class="title"><span>四、NodeJs基础教程</span><span class="arrow"></span>
        <ul class="in-sidebar">
          <li><a href="#">NodeJs基础教程1</a></li>
          <li><a href="#">NodeJs基础教程2</a></li>
          <li><a href="#">NodeJs基础教程3</a></li>
          <li><a href="#">NodeJs基础教程4</a></li>
          <li><a href="#">NodeJs基础教程5</a></li>
        </ul>
      </li>
      <li class="title"><span>五、IOS基础教程</span><span class="arrow"></span>
        <ul class="in-sidebar">
          <li><a href="#">IOS基础教程1</a></li>
          <li><a href="#">IOS基础教程2</a></li>
          <li><a href="#">IOS基础教程3</a></li>
          <li><a href="#">IOS基础教程4</a></li>
          <li><a href="#">IOS基础教程5</a></li>
        </ul>
      </li>
    </ul>
 
  </div>
 
  <script src="js/jquery-1.8.3.min.js"></script>
  <script src="js/main.js"></script>
</body>
</html>

style.css

/*globle*/
ul, li{
  margin: 0;
  padding: 0;
  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有所帮助。

Javascript 相关文章推荐
让getElementsByName适应IE和firefox的方法
Sep 24 Javascript
用jquery实现学校的校历(asp.net+jquery ui 1.72)
Jan 01 Javascript
Web Inspector:关于在 Sublime Text 中调试Js的介绍
Apr 18 Javascript
jquery实现模拟百分比进度条渐变效果代码
Oct 29 Javascript
详解javascript的变量与标识符
Jan 04 Javascript
js实现不重复导入的方法
Mar 02 Javascript
深入解析jQuery中Deferred的deferred.promise()方法
May 03 Javascript
基于BootStrap Metronic开发框架经验小结【四】Bootstrap图标的提取和利用
May 12 Javascript
KnockoutJS 3.X API 第四章之数据控制流if绑定和ifnot绑定
Oct 10 Javascript
网络传输协议(http协议)
Nov 18 Javascript
解决AjaxFileupload 上传时会出现连接重置的问题
Jul 07 Javascript
React 组件中的 bind(this)示例代码
Sep 16 Javascript
jQuery实现左右切换焦点图
Apr 03 #Javascript
基于jquery ui的alert,confirm方案(支持换肤)
Apr 03 #Javascript
javascript制作sql转换为stringBuffer的小工具
Apr 03 #Javascript
JavaScript替换当前页面的方法
Apr 03 #Javascript
iframe里使用JavaScript控制主页转向的方法
Apr 03 #Javascript
JavaScript返回网页中锚点数目的方法
Apr 03 #Javascript
JavaScript获取页面中第一个锚定文本的方法
Apr 03 #Javascript
You might like
探讨如何使用SimpleXML函数来加载和解析XML文档
2013/06/07 PHP
微信红包随机生成算法php版
2016/07/21 PHP
PHP编程获取图片的主色调的方法【基于Imagick扩展】
2017/08/02 PHP
JavaScript入门之事件、cookie、定时等
2011/10/21 Javascript
深入理解JavaScript系列(10) JavaScript核心(晋级高手必读篇)
2012/01/15 Javascript
js中function()使用方法
2013/12/24 Javascript
通过JS动态创建一个html DOM元素并显示
2014/10/15 Javascript
jQuery中remove()方法用法实例
2014/12/25 Javascript
完美实现bootstrap分页查询
2015/12/09 Javascript
理解javascript中DOM事件
2015/12/25 Javascript
微信开发 微信授权详解
2016/10/21 Javascript
bootstrap警告框示例代码分享
2017/05/17 Javascript
Vue项目数据动态过滤实践及实现思路
2018/09/11 Javascript
[01:53]DOTA2超级联赛专访Zhou 五年职业青春成长
2013/05/29 DOTA
[02:35]DOTA2英雄基础教程 末日使者
2013/12/04 DOTA
Python 专题六 局部变量、全局变量global、导入模块变量
2017/03/20 Python
Python中用字符串调用函数或方法示例代码
2017/08/04 Python
基于Django与ajax之间的json传输方法
2018/05/29 Python
python3的输入方式及多组输入方法
2018/10/17 Python
对pandas的行列名更改与数据选择详解
2018/11/12 Python
python opencv读mp4视频的实例
2018/12/07 Python
Django 多环境配置详解
2019/05/14 Python
解决H5的a标签的download属性下载service上的文件出现跨域问题
2019/07/16 HTML / CSS
编写html5时调试发现脚本php等网页js、css等失效
2013/12/31 HTML / CSS
东南亚旅游平台:The Trip Guru
2018/01/01 全球购物
Public Desire美国/加拿大:全球性的在线鞋类品牌
2018/12/17 全球购物
室内拓展活动方案
2014/02/13 职场文书
模特职业生涯规划范文
2014/02/26 职场文书
趣味运动会策划方案
2014/06/02 职场文书
旅游饭店管理专业自荐书
2014/06/28 职场文书
股权转让协议范本
2014/12/07 职场文书
教师岗位职责
2015/02/03 职场文书
五星级酒店前台接待岗位职责
2015/04/02 职场文书
2015年幼儿园国庆节活动总结
2015/07/30 职场文书
修改MySQL的数据库引擎为INNODB的方法
2021/05/26 MySQL
深入理解margin塌陷和margin合并的解决方案
2021/06/26 HTML / CSS