Question

jquery实现二级菜单时，点击一级菜单，二级菜单滑出一下就又消失了

点击菜单中的链接，是加载的content中的内容，当加载的内容慢时，就出现上述的问题了，点击的链接加载的内容不慢时，就没有影响

js代码：
function loadContent(url) {
$("#content").load(url);
}
function defaultDialog(url) {
window.open(url);
}
$(document).ready(function() {
$('.submenu > a').click(function(e) {
e.preventDefault();
var submenu = $(this).siblings('ul');
var li = $(this).parents('li');
var submenus = $('#sidebar li.submenu ul');
var submenus_parents = $('#sidebar li.submenu');
if (li.hasClass('open')) {
if (($(window).width() > 768) || ($(window).width() < 479)) {
submenu.slideUp();
} else {
submenu.fadeOut(750);
}
li.removeClass('open');
$("#parent_menu").replaceWith("<a class='f-l co-87' id='parent_menu' href=''></a>");
} else {
if (($(window).width() > 768) || ($(window).width() < 479)) {
submenus.slideUp();
submenu.slideDown();
} else {
submenus.fadeOut(750);
submenu.fadeIn(750);
}
submenus_parents.removeClass('open');
li.addClass('open');
$("#parent_menu").replaceWith("<a class='f-l co-87' id='parent_menu' href='"+ $(this).attr("href")+"'>"+$(this).text() +"<span>></span></a>");
}
});

});
还差下面这段代码：
var ul = $('#sidebar > ul');

$('#sidebar > a').click(function(e) {
e.preventDefault();

var sidebar = $('#sidebar');

if (sidebar.hasClass('open')) {
sidebar.removeClass('open');
ul.slideUp(750);
} else {
sidebar.addClass('open');
ul.slideDown(750);
}
});

Answer 1

jquery实现由一级导航菜单到二级滑动显示效果，并点击增加背景变化效果，代码挺简单的，但是也效果也很好，是非常实用的，也是很流行的菜单样式
html:
<div class="webSchoolL" id="webSchoolL">
<ul class="leftTab" id="leftMeau">
<li class="listL01">1</li>
<li>
<a href="#nogo">2</a>
<ul class="navUl">
<li><a href="#nogo">22</a></li>
<li><a href="#nogo" class="curButA">22</a></li>
<li><a href="#nogo">22</a></li>
<li><a href="#nogo">22</a></li>
</ul>
</li>
<li>
<a href="#nogo">3</a>
<ul class="navUl">
<li><a href="#nogo">33</a></li>
<li><a href="#nogo" class="curButA">33</a></li>
<li><a href="#nogo">33</a></li>
<li><a href="#nogo">33</a></li>
</ul>姿凳梁
</li>
<li>
<a href="#nogo">4</a>
<ul class="navUl">
<li><a href="#nogo">44</a></li>
<li><a href="#nogo" class="curButA">44</a></li>
<li><a href="#nogo">44</a></li>
<li><a href="#nogo">44</a></li>
</ul>
</li>
<li>
<a href="#nogo">迹运5</a>
<ul class="navUl">
<li><a href="#nogo">55</a></li>
<li><a href="#nogo" class="curButA">55</a></li>
<li><a href="#nogo">55</a></li>
<li><a href="#nogo">55</a></li>
</ul>
</li>
<li>
<a href="#nogo" class="curButA">6</a>
<ul class="navUl" style="display:block;">
<li><a href="#nogo">66</a></li>
<li><a href="#nogo" class="curButA">66</a></li>
<li><a href="#nogo">66</a></li>
<li><a href="#nogo">66</a></li>
</ul>
</li>
<li>
<a href="#nogo">7</a>
<ul class="navUl">
<li><a href="#nogo">77</a></li>
<li><a href="#nogo" class="curButA">77</a></li>
<li><a href="#nogo">77</a></li>
<li><a href="#nogo">77</a></li>
</ul>
</li>
<li>
<a href="#nogo">8</a>
<ul class="navUl">
<li><a href="#nogo">88</a></li>
<li><a href="#nogo" class="curButA">88</a></li>
<li><a href="#nogo">88</a></li>
<li><a href="#nogo">88</a></li>
</ul>
</li>
<li>
<a href="#nogo">9</a>
<ul class="navUl">
<li><a href="#nogo">99</a></li>
<li><a href="#nogo" class="curButA">99</a></li>
<li><a href="#nogo">99</a></li>
<li><a href="#nogo">99</a></li>
</ul>
</li>
</ul>
</div>
2
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;}
3
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();
});
})
4
效果如图所示
（此图看不出滑动效果，但实际效果确实是滑动效果）

END
注意事项
此方法简单灵活，拿来就可以应用，应用修改时请注意三种样式一起修改，避免代码无用
另外应用时记得把jquery类库引到页面中来，否则无效果

追问

可是我想知道我的代码里出现什么问题了呢，代码不太好换了，所以能在原基础上改进么

追答

这个嘛，我也不太确定了。抱歉啊