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 相关文章推荐
ExtJS扩展 垂直tabLayout实现代码
Jun 21 Javascript
不使用中间变量,交换int型的 a, b两个变量的值。
Oct 29 Javascript
Extjs gridpanel 出现横向滚动条问题的解决方法
Jul 04 Javascript
innerText和textContent对比及使用介绍
Feb 27 Javascript
jQuery图片切换动画效果
Feb 28 Javascript
vue解决跨域路由冲突问题思路解析
Nov 03 Javascript
angular第三方包开发整理(小结)
Apr 19 Javascript
Vue 组件传值几种常用方法【总结】
May 28 Javascript
浅析vue-router原理
Oct 19 Javascript
vant IndexBar实现的城市列表的示例代码
Nov 20 Javascript
解决vant-UI库修改样式无效的问题
Nov 03 Javascript
Vue组件简易模拟实现购物车
Dec 21 Vue.js
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
PHP实现求两个字符串最长公共子串的方法示例
2017/11/17 PHP
PHP封装请求类实例分析【基于Yii框架】
2019/10/17 PHP
锋利的jQuery jQuery中的DOM操作
2010/03/21 Javascript
js特殊字符转义介绍
2013/11/05 Javascript
浅谈利用JavaScript进行的DDoS攻击原理与防御
2015/06/04 Javascript
使用Chart.js图表库制作漂亮的响应式表单
2015/10/28 Javascript
jquery div模态窗口的简单实例
2016/05/28 Javascript
vue2笔记 — vue-router路由懒加载的实现
2017/03/03 Javascript
Vue.js render方法使用详解
2017/04/05 Javascript
jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
2017/04/28 jQuery
Javascript中this关键字指向问题的测试与详解
2017/08/11 Javascript
微信小程序自定义音乐进度条的实例代码
2018/08/28 Javascript
150行代码带你实现微信小程序中的数据侦听
2019/05/17 Javascript
Vue实现导航栏点击当前标签变色功能
2020/08/19 Javascript
node.js实现上传文件功能
2019/07/15 Javascript
Jquery 获取相同NAME 或者id删除行操作
2020/08/24 jQuery
js前端对于大量数据的展示方式及处理方法
2020/12/02 Javascript
[02:10]DOTA2 TI10勇士令状玩法及不朽Ⅰ展示:焕新世界,如你所期
2020/05/29 DOTA
[45:25]完美世界DOTA2联赛循环赛 PXG vs IO 第一场 11.06
2020/11/09 DOTA
在Python程序和Flask框架中使用SQLAlchemy的教程
2016/06/06 Python
解决python3 HTMLTestRunner测试报告中文乱码的问题
2018/12/17 Python
YUV转为jpg图像的实现
2019/12/09 Python
Python3连接Mysql8.0遇到的问题及处理步骤
2020/02/17 Python
香港草莓网土耳其网站:Strawberrynet TR
2017/03/02 全球购物
Allsole美国/加拿大:英国一家专门出售品牌鞋子的网站
2018/10/21 全球购物
英国排名第一的冲浪店:Ann’s Cottage
2020/06/21 全球购物
医学院校毕业生自荐信范文
2014/01/01 职场文书
民族学专业大学生职业规划范文:清晰未来的构想
2014/09/20 职场文书
初中教师德育工作总结2015
2015/05/12 职场文书
2015年行政人事工作总结
2015/05/21 职场文书
毕业典礼主持词
2015/06/29 职场文书
经典法律座右铭(50句)
2019/08/15 职场文书
Python Django 后台管理之后台模型属性详解
2021/04/25 Python
Java并发编程之详解CyclicBarrier线程同步
2021/06/23 Java/Android
如何利用Python实现n*n螺旋矩阵
2022/01/18 Python
Redis官方可视化工具RedisInsight安装使用教程
2022/04/19 Redis