关于jquery制作折叠菜单的问题

highcharts的官网的折叠菜单模块，打开关闭列表影响底部模块，好像使用了bootstrap，请教其中原理！

http://www.highcharts.com

这是我项目中控制菜单：
html:

• 系统管理
  菜单管理查询 权限管理 角色管理 角色配置权限管理 用户及权限配置新增 用户及权限配置查看

js:
$(function(){

//左边菜单栏切换
$('#mainmenu').find('li').find('a.drop').click(function(){
$('#mainmenu').find('li').find('a.drop').removeClass('active');
$(this).addClass('active');
$(this).parent().find('div.droplist').slideToggle();
$('#mainmenu').find('li').find('div.droplist a').click(function(){
$('#mainmenu').find('li').find('div.droplist a').removeClass('cur');
$(this).addClass('cur');
})
});

//右边内容tab切换
$('nav.tabnav1').find('a').click(function(){
$('nav.tabnav1').find('a').removeClass('active');
$(this).addClass('active');
})
$('.tabnav2').find('a').click(function(){
$('.tabnav2').find('a').removeClass('active');
$(this).addClass('active');
})
$('.tabnav3').find('a').click(function(){
$('.tabnav3').find('a').removeClass('active');
$(this).addClass('active');
})

用CSS控制样式

楼上 肯定不是用css控制 css做出来的没有动画效果 体验很差

我来说说我的思路

如果不借助任何插件的话 我会选用jquery的animate方法

首先最外层是一个div 这个div设置overflow为hidden 溢出内容隐藏

首先是第一层菜单使用ul li布局 li的样式肯定都是一样的

之后里面那层也用li 也就是 ul里面的li再套一层ul li

第一层li的全部设置overflow hidden隐藏

当我点击第一层li的时候用animate控制上下的延伸及时间

同时其余的第一层li高宽全部变回未点击状态

页脚单独一块，菜单和右边的内容一块，菜单展开高度变了自然会将页脚顶下去了，收缩了高度变了就会跟上来。。和bootstrap没什么关系