jquery实现由一级导航菜单到二级滑动显示效果

html:

css:.webSchoolL{ width:200px; height:460px; background:#ececec;} ul.leftTab{ display:block; width:185px; border:1px solid #d0d0d0; margin:8px 0 0 7px; float:left; display:inline; background:#fff;} ul.leftTab li{ width:179px; text-align:left; margin:5px 3px; float:left; display:inline;} ul.leftTab li a{height:28px; width:179px; display:block; background:url(../images/meaulibg.png) no-repeat;line-height:28px;text-indent:47px; font-size:14px; font-weight:bold; color:#000;} ul.leftTab li a:hover,ul.leftTab .curButA{background:url(../images/meaulicur.png) no-repeat; color:#fff; font-weight:bold; text-decoration:none;} ul.leftTab .listL01{ height:32px; width:187px; background:url(../images/listL01.gif) no-repeat; margin:0 auto 3px auto; font-size:14px; font-weight:bold; color:#ffffff; text-indent:32px; margin:0px 0 0 -1px;line-height:32px;} ul.leftTab li ul.navUl { display:none;border-left:1px solid #3fb4e8;border-right:1px solid #3fb4e8;border-bottom:1px solid #3fb4e8;} ul.leftTab li ul.navUl li { float:none;margin:0px;} ul.leftTab li ul.navUl li a { _width:177px;background:none; font-size:12px; font-weight:normal; color:#333;} ul.leftTab li ul.navUl li a.curButA, ul.leftTab li ul.navUl li a:hover { background:url(../images/meaunavcur.png) no-repeat 18px 0px;color:#000;font-weight:normal;}

js:$(function(){//导航特效  $('#leftMeau li:has(ul) a').click(function(){ $(this).addClass('curButA'); $(this).siblings().slideDown();  $(this).parent().siblings().find('a').removeClass('curButA'); $(this).parent().siblings().find('ul').slideUp(); }); })

效果如图所示（此图看不出滑动效果，但实际效果确实是滑动效果）

此方法简单灵活，拿来就可以应用，应用修改时请注意三种样式一起修改，避免代码无用

另外应用时记得把jquery类库引到页面中来，否则无效果