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 相关文章推荐
Javascript实现的分页函数
Dec 22 Javascript
csdn 批量接受好友邀请
Feb 19 Javascript
Javascript 继承实现例子
Aug 12 Javascript
juqery 学习之三 选择器 子元素与表单
Nov 25 Javascript
页面实时更新时间的JS实例代码
Dec 18 Javascript
JQuery使用$.ajax和checkbox实现下次不在通知功能
Apr 16 Javascript
jquery京东商城双11焦点图多图广告特效代码分享
Sep 06 Javascript
jQuery实现磁力图片跟随效果完整示例
Sep 16 Javascript
Vue header组件开发详解
Jan 26 Javascript
vue.js中created方法作用
Mar 30 Javascript
微信小程序语音同步智能识别的实现案例代码解析
May 29 Javascript
JavaScript 实现页面滚动动画
Apr 24 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
在Zeus Web Server中安装PHP语言支持
2006/10/09 PHP
php上传图片存入数据库示例分享
2014/03/11 PHP
php+ajax无刷新上传图片实例代码
2015/11/17 PHP
实现PHP搜索加分页
2016/10/12 PHP
如何打开php的gd2库
2017/02/09 PHP
Laravel 5.5 异常处理 &amp; 错误日志的解决
2019/10/17 PHP
另一个javascript小测验(代码集合)
2011/07/27 Javascript
用jQuery与JSONP轻松解决跨域访问的问题
2014/02/04 Javascript
离开当前页面前使用js判断条件提示是否要离开页面
2014/05/02 Javascript
Jquery $.getJSON 在IE下的缓存问题解决方法
2014/10/10 Javascript
JS中FRAME的操作问题实例分析
2014/10/21 Javascript
jQuery中ajax的load()方法用法实例
2014/12/26 Javascript
Jquery中Event对象属性小结
2015/02/27 Javascript
纯JavaScript实现的兼容各浏览器的添加和移除事件封装
2015/03/28 Javascript
浅谈JSON.parse()和JSON.stringify()
2015/07/14 Javascript
再JavaScript的jQuery库中编写动画效果的指南
2015/08/13 Javascript
Javascript实现图片不间断滚动的代码
2016/06/22 Javascript
jQuery 跨域访问解决原理案例详解
2016/07/09 Javascript
基于vue实现swipe轮播组件实例代码
2017/05/24 Javascript
Mac下安装vue
2018/04/11 Javascript
vue 项目接口管理的实现
2019/01/17 Javascript
详解element-ui日期时间选择器的日期格式化问题
2019/04/08 Javascript
vue项目中实现缓存的最佳方案详解
2019/07/11 Javascript
countup.js实现数字动态叠加效果
2019/10/17 Javascript
实例讲解Python中的私有属性
2014/08/21 Python
python实现对指定输入的字符串逆序输出的6种方法
2018/04/26 Python
python实现flappy bird小游戏
2018/12/24 Python
python单例设计模式实现解析
2020/01/07 Python
Python 2种方法求某个范围内的所有素数(质数)
2020/01/31 Python
Python 格式化输出_String Formatting_控制小数点位数的实例详解
2020/02/04 Python
新手常见Python错误及异常解决处理方案
2020/06/18 Python
将相和教学反思
2014/02/04 职场文书
群众路线剖析材料
2014/09/30 职场文书
会计求职自荐信
2015/03/26 职场文书
2016年少先队活动总结
2016/04/06 职场文书
Django基础CBV装饰器和中间件
2022/03/22 Python