html折叠手风琴效果,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

jquery js css html

一、HTML5基础教程
- HTML5基础教程1
- HTML5基础教程2
- HTML5基础教程3
- HTML5基础教程4
- HTML5基础教程5
二、CSS3基础教程
- CSS3基础教程1
- CSS3基础教程2
- CSS3基础教程3
- CSS3基础教程4
- CSS3基础教程5
三、Javascript基础教程
- Javascript基础教程1
- Javascript基础教程2
- Javascript基础教程3
- Javascript基础教程4
- Javascript基础教程5
四、NodeJs基础教程
- NodeJs基础教程1
- NodeJs基础教程2
- NodeJs基础教程3
- NodeJs基础教程4
- NodeJs基础教程5
五、IOS基础教程
- IOS基础教程1
- IOS基础教程2
- IOS基础教程3
- IOS基础教程4
- IOS基础教程5

style.css

/*globle*/

ul, li{

margin: 0;

padding: 0;

list-style-type: none;

}

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有所帮助。

html折叠手风琴效果,jQuery制作效果超棒的手风琴折叠菜单相关推荐

html5 拉窗帘效果,jQuery和CSS3超酷3D拉窗帘式滚动导航特效
这是一款效果炫酷的jQuery和CSS3 3D拉窗帘式导航特效.该特效使用CSS transformations 和 jQuery使两块"窗帘"沿Z轴方向模拟被拉开的效果. HTM ...
jQuery和CSS3超酷二级下拉菜单插件
这是一款效果很酷又简单实用的 jQuery二级下拉菜单特效,该特效在点击触发按钮后,二级下拉菜单会向下滑动覆盖原来的主菜单,关闭后二级下拉菜单又向上滑动回去,二级菜单不占用多余的空间. 这个菜单插件是 ...
超棒的视差滚动效果javascript类库 - Jarallax
为什么80%的码农都做不了架构师?>>> 日期:2012-9-27 来源:GBin1.com 如果你没有听说过视差滚动的话,说明你真out了,作为2011年最流行的网站设计效 ...
纵向手风琴html,CSS3制作垂直手风琴
说起手风琴的制作,大家肯定首选就是使用jQuery来制作,我在<如何使用jQuery制作手风琴效果>也简单的介绍了使用jQuery制作手风琴效果.但今天我在Saud Khan的<Cr ...
超棒的Google web字体查询工具 - Best Web Fonts
日期:2012-9-30 来源:GBin1.com Best web fonts是一个免费的字体工具,能够帮助你直观清晰的查询Google的web字体,你可以在一个现成的网站中调试不同类型的Goog ...
使用jQuery制作手风琴效果.(转)
http://www.cssrain.cn/article.asp?id=1369 使用jQuery制作手风琴效果本例主要讲解如何利用jQuery创建一个简单的手风琴风格的竖向菜单,从易到难. 第一 ...
jQuery效果-自定义动画效果animate /王者荣耀手风琴效果案例
jQuery效果自定义动画效果animate animate([params,[speed],[easing],[fn]) (1)params:想要更改的样式属性,以对象形式传递,必须写,属性名可以 ...
css3+jQuery制作导航菜单（带动画效果）
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>css ...
php产品效果图,jQuery_基于JQuery制作的产品广告效果，效果图.如下：动画效果介绍 - phpStudy...
基于JQuery制作的产品广告效果效果图.如下: 动画效果介绍:这组广告效果是打开页面后图片会自动播放,从1-5共计5张图片,如果属标放到右下角的1.2.3.4.5列表上,可以自由进行切换到自己想看 ...

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

html折叠手风琴效果,jQuery制作效果超棒的手风琴折叠菜单相关推荐

最新文章

热门文章

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

html折叠 手风琴效果,jQuery制作效果超棒的手风琴折叠菜单相关推荐

最新文章

热门文章

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

html折叠手风琴效果,jQuery制作效果超棒的手风琴折叠菜单相关推荐