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 相关文章推荐
用脚本调用样式的几种方法
Dec 09 Javascript
获取dom元素那些讨厌的位置封装代码
Jun 23 Javascript
javascript下string.format函数补充
Aug 24 Javascript
js禁止document element对象选中文本实现代码
Mar 21 Javascript
javaScript使用EL表达式的几种方式
May 27 Javascript
JS如何实现文本框随文本的长度而增长
Jul 30 Javascript
jQuery弹簧插件编写基础之“又见弹窗”
Dec 11 Javascript
javascript实现图片轮播效果
Jan 20 Javascript
AngularJS之自定义服务详解(factory、service、provider)
Apr 14 Javascript
Node.js实现文件上传的示例
Jun 28 Javascript
React Native 图片查看组件的方法
Mar 01 Javascript
微信小程序使用swiper组件实现类3D轮播图
Aug 29 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
php mail to 配置详解
2014/01/16 PHP
Yii使用smsto短信接口的函数demo示例
2016/07/13 PHP
浅析PHP中的 inet_pton 网络函数
2019/12/16 PHP
jQuery 扩展对input的一些操作方法
2009/10/30 Javascript
新鲜出炉的js tips提示效果
2011/04/03 Javascript
TimergliderJS 一个基于jQuery的时间轴插件
2011/12/07 Javascript
JS性能优化笔记搜索整理
2013/08/21 Javascript
jquery中的过滤操作详细解析
2013/12/02 Javascript
nodejs教程之异步I/O
2014/11/21 NodeJs
js实现iframe跨页面调用函数的方法
2014/12/13 Javascript
JS实现的3D拖拽翻页效果代码
2015/10/31 Javascript
JavaScript必知必会(二) null 和undefined
2016/06/08 Javascript
jQuery点击头像上传并预览图片
2017/02/23 Javascript
详谈jQuery中的一些正则匹配表达式
2017/03/08 Javascript
vue.js实现条件渲染的实例代码
2017/06/22 Javascript
浅谈react 同构之样式直出
2017/11/07 Javascript
浅谈vue-router2路由参数注意的问题
2017/11/08 Javascript
ios中视频的最后一桢问题解决
2019/05/14 Javascript
微信公众号生成新浪短网址的实现(快速生成)
2019/08/18 Javascript
python3.5实现socket通讯示例(TCP)
2017/02/07 Python
利用python将图片转换成excel文档格式
2017/12/30 Python
浅谈tensorflow中几个随机函数的用法
2018/07/27 Python
python3.7 openpyxl 删除指定一列或者一行的代码
2019/10/08 Python
Python读取配置文件(config.ini)以及写入配置文件
2020/04/08 Python
python 实现两个线程交替执行
2020/05/02 Python
记一次Django响应超慢的解决过程
2020/09/17 Python
python 爬虫网页登陆的简单实现
2020/11/30 Python
一款纯css3实现的竖形二级导航的实例教程
2014/12/11 HTML / CSS
CSS3 @keyframes简单动画实现
2018/02/24 HTML / CSS
html5桌面通知(Web Notifications)实例解析
2014/07/07 HTML / CSS
高级人员简历的自我评价分享
2013/11/03 职场文书
大学社团计划书
2014/05/01 职场文书
2014年人事专员工作总结
2014/11/19 职场文书
2015毕业生实习期工作总结
2015/04/09 职场文书
小学信息技术教学反思
2016/02/16 职场文书
Python采集壁纸并实现炫轮播
2022/04/30 Python