jQuery简单实用的折叠侧边菜单导航栏效果

使用方法：

引入核心CSS样式文件

<link rel=stylesheet type=text/css href="css/lrtk.css">

引入jQuery库文件

<script type=text/javascript src="js/jquery.min.js"></script>

JS结构

$(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");
	});
});

HTML结构

<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>