Colorful Content Accordion, CSS & jQuery

View the original tutorial »

来源:Tutorialzine 代码整理:站长教学网

*尊重他人劳动成果,转载请自觉注明出处!注:此代码仅供学习交流,请勿用于商业用途。

jQuery弹性竖导航网页菜单下载

jquery弹性竖导航网页菜单,可控制关闭打开,效果流畅,推荐下载。站长教学网搜集整理。

使用说明:

样式:

.dropdown{
/* The expandable lists */
display:none; /*注释这行就可以打开的时候显示全部菜单*/
padding-top:5px;
width:100%;
}

代码:

$(document).ready(function(){
/* This code is executed after the DOM has been completely loaded 这个代码在页面完全被装载后被执行。*/

/* Changing thedefault easing effect - will affect the slideUp/slideDown methods: */
$.easing.def = "easeOutBounce";

/* Binding a click event handler to the links: 绑定li.button单击触发事件执行的内容*/
$('li.button a').click(function(e){

/* Finding the drop down list that corresponds to the current section: 寻找绑定按钮的统一级别的下一个层*/
var dropDown = $(this).parent().next();

/* Closing all other drop down sections, except the current one 关闭所有的下拉菜单,打开当前一个下拉菜单*/
$('.dropdown').not(dropDown).slideUp('slow'); //注释这行就能使打开当前下拉菜单,而不会关闭其它菜单。
dropDown.slideToggle('slow');

/* Preventing the default event (which would be to navigate the browser to the link's address) 取消事件的默认动作。*/
e.preventDefault();
})

});