jQuery实现简单动画垂直折叠导航效果

    简单的jQuery实现垂直菜单折叠效果，没有使用其他插件，几句代码实现效果，没有多余代码，不存在和插件冲突问题。

垂直方向可以展开或者折叠的菜单导航代码效果
在折叠的同时带有些许动画效果，看起来很不错
兼容性主流浏览器
使用方法：
1、引入head部分的CSS代码
2、将body中的代码部分拷贝到你需要的地方
(注意保持图片、jQuery文件路径正确)

JQuery代码，简单几句代码就可以实现该效果，新手可以学习一下。

$(document).ready(function(){
    $("#firstpane .menu_body:eq(0)").show();
    $("#firstpane h3.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 h3.menu_head").mouseover(function(){
        $(this).addClass("current").next("div.menu_body").slideDown(500).siblings("div.menu_body").slideUp("slow");
        $(this).siblings().removeClass("current");
    });
});

本文作者： Liaodeity

本文链接： https://www.jianbaizhan.com/code/776.html

版权声明： 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处！