jQuery垂直可折叠手风琴菜单特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery垂直可折叠手风琴菜单特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jQuery垂直可折叠手风琴菜单</title>
<link rel=stylesheet type=text/css href="css/zzsc.css">
<script type=text/javascript src="js/jquery.min.js"></script>
</head>
<body>
<!-- 代码 开始 -->
 <div id="firstpane" class="menu_list">
    <p class="menu_head current">哲学</p>
    <div style="display:block" class=menu_body >
      <a href="#">科学技术哲学</a>
      <a href="#">宗教学</a>
      <a href="#">美学</a>
      <a href="#">伦理学</a>
      <a href="#">逻辑学</a>
      <a href="#">外国哲学</a>
      <a href="#">中国哲学</a>
      <a href="#">马克思主义哲学</a>
    </div>
    <p class="menu_head">经济学</p>
    <div style="display:none" class=menu_body >
      <a href="#">应用经济学</a>
      <a href="#">理论经济学</a>
      <a href="#">国民经济学</a>
      <a href="#">区域经济学</a>
      <a href="#">产业经济学</a>
      <a href="#">国际贸易学</a>
      <a href="#">劳动经济学</a>
      <a href="#">政治经济学</a>
    </div>
    <p class="menu_head">法学</p>
    <div style="display:none" class=menu_body >
      <a href="#">马克思主义基本原理</a>
      <a href="#">马克思主义发展史</a>
      <a href="#">马克思主义中国化研究</a>
      <a href="#">国外马克思主义研究</a>
      <a href="#">思想政治教育</a>
    </div>
    <p class="menu_head">教育学</p>
    <div style="display:none" class=menu_body >
      <a href="#">体育人文社会学</a>
      <a href="#">体育教育训练学</a>
      <a href="#">民族传统体育学</a>
      <a href="#">发展与教育心理学</a>
      <a href="#">应用心理学</a>
      <a href="#">教育学原理</a>
      <a href="#">课程与教学论</a>
      <a href="#">比较教育学</a>
      <a href="#">学前教育学</a>
      <a href="#">高等教育学</a>
      <a href="#">成人教育学</a>
      <a href="#">职业技术教育学</a>
      <a href="#">特殊教育学</a>
      <a href="#">教育技术学</a>
    </div>
    <p class="menu_head">工学</p>
    <div style="display:none" class=menu_body >
      <a href="#">一般力学与力学基础</a>
      <a href="#">固体力学</a>
      <a href="#">流体力学</a>
      <a href="#">工程力学</a>
      <a href="#">机械制造及其自动化</a>
      <a href="#">机械电子工程</a>
      <a href="#">机械设计及理论</a>
      <a href="#">仪器科学与技术</a>
      <a href="#">精密仪器及机械</a>
      <a href="#">测试计量技术及仪器</a>
    </div>
</div>
<script type=text/javascript>
$(document).ready(function(){
	$("#firstpane .menu_body:eq(0)").show();
	$("#firstpane p.menu_head").click(function(){
		$(this).addClass("current").next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
		$(this).siblings().removeClass("current");
	});
	$("#secondpane .menu_body:eq(0)").show();
	$("#secondpane p.menu_head").mouseover(function(){
		$(this).addClass("current").next("div.menu_body").slideDown(500).siblings("div.menu_body").slideUp("slow");
		$(this).siblings().removeClass("current");
	});
	
});
</script>
</body>
</html>

JS代码(html5.js):

/* HTML5 Shiv v3.7.0 | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed*/
(function(l,f){
	function m(){
	var a=e.elements;
	return"string"==typeof a?a.split(" "):a}
function i(a){
	var b=n[a[o]];
	b||(b={
}
,h++,a[o]=h,n[h]=b);
	return b}
function p(a,b,c){
	b||(b=f);
	if(g)return b.createElement(a);
	c||(c=i(b));
	b=c.cache[a]?c.cache[a].cloneNode():r.test(a)?(c.cache[a]=c.createElem(a)).cloneNode():c.createElem(a);
	return b.canHaveChildren&&!s.test(a)?c.frag.appendChild(b):b}
function t(a,b){
	if(!b.cache)b.cache={
}
,b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag();
	a.createElement=function(c){
	return!e.shivMethods?b.createElem(c):p(c,a,b)}
;
	a.createDocumentFragment=Function("h,f","return function(){
	var n=f.cloneNode(),c=n.createElement;
	h.shivMethods&&("+m().join().replace(/[\w\-]+/g,function(a){
	b.createElem(a);
	b.frag.createElement(a);
	return'c("'+a+'")'}
)+");
	return n}
")(e,b.frag)}
function q(a){
	a||(a=f);
	var b=i(a);
	if(e.shivCSS&&!j&&!b.hasCSS){
	var c,d=a;
	c=d.createElement("p");
	d=d.getElementsByTagName("head")[0]||d.documentElement;
	c.innerHTML="x<style>article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{
	display:block}
mark{
	background:#FF0;
	color:#000}
template{
	display:none}
</style>";
	c=d.insertBefore(c.lastChild,d.firstChild);
	b.hasCSS=!!c}
g||t(a,b);
	return a}
var k=l.html5||{
}
,s=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,r=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,j,o="_html5shiv",h=0,n={
}
,g;
	(function(){
	try{
	var a=f.createElement("a");
	a.innerHTML="<xyz></xyz>";
	j="hidden"in a;
	var b;
	if(!(b=1==a.childNodes.length)){
	f.createElement("a");
	var c=f.createDocumentFragment();
	b="undefined"==typeof c.cloneNode||"undefined"==typeof c.createDocumentFragment||"undefined"==typeof c.createElement}
g=b}
catch(d){
	g=j=!0}
}
)();
	var e={
	elements:k.elements||"abbr article aside audio bdi canvas data datalist details dialog figcaption figure footer header hgroup main mark meter nav output progress section summary template time video",version:"3.7.0",shivCSS:!1!==k.shivCSS,supportsUnknownElements:g,shivMethods:!1!==k.shivMethods,type:"default",shivDocument:q,createElement:p,createDocumentFragment:function(a,b){
	a||(a=f);
	if(g)return a.createDocumentFragment();
	for(var b=b||i(a),c=b.frag.cloneNode(),d=0,e=m(),h=e.length;
	d<h;
	d++)c.createElement(e[d]);
	return c}
}
;
	l.html5=e;
	q(f)}
)(this,document);

CSS代码(zzsc.css):

.menu_list{margin:10px auto;width:185px;}
.menu_head{width:185px;height:47px;line-height:47px;padding-left:38px;font-size:14px;color:#525252;cursor:pointer;border:1px solid #e1e1e1;position:relative;font-weight:bold;background:#f1f1f1 url(../images/pro_left.png) center right no-repeat;margin:0;}
.menu_list .current{background:#f1f1f1 url(../images/pro_down.png) center right no-repeat;}
.menu_body{width:223px;height:auto;overflow:hidden;line-height:38px;border-left:1px solid #e1e1e1;backguound:#fff;border-right:1px solid #e1e1e1;}
.menu_body a{display:block;width:223px;height:38px;line-height:38px;padding-left:38px;color:#777777;background:#fff;text-decoration:none;border-bottom:1px solid #e1e1e1;}
.menu_body a:hover{text-decoration:none;}

附件:下载该文件资源,减少时间成本(增值服务)