/代码如下:
/ 点击菜单滑动下拉,焦点不在下滑界面自动回收
$(document).ready(function () {
$(".TopMenuBar li").hover(function () {
$(this).children(".SecondMenuBar").slideDown();
$("#zg_Iframe").css('display', 'block');
}, function () {
$(this).children(".SecondMenuBar").slideUp();
$("#zg_Iframe").css('display', 'none');
}
)
})
貌似hover不只对TopMenuBar li 起作用,连'SecondMenuBar'下面的子li也起作用了,现在只想让这个hover只对外层TopMenuBar li起作用
页面布局如下:<div id='AOPTopMenu' class='TopMenuBar' >
<ul>
<li>一级菜单
<div ID='Tb_TopMenu_1' class='SecondMenuBar'>
<ul>
<li>二级菜单
<div ID='Tb_SecondMenu_1' class='ThirdMenuBar'>
<ul>
<li>三级菜单<li>
</ul>
</div>
</li>
</ul>
</div>
</li>
</ul>
</div>
/ 点击菜单滑动下拉,焦点不在下滑界面自动回收
$(document).ready(function () {
$(".TopMenuBar li").hover(function () {
$(this).children(".SecondMenuBar").slideDown();
$("#zg_Iframe").css('display', 'block');
}, function () {
$(this).children(".SecondMenuBar").slideUp();
$("#zg_Iframe").css('display', 'none');
}
)
})
貌似hover不只对TopMenuBar li 起作用,连'SecondMenuBar'下面的子li也起作用了,现在只想让这个hover只对外层TopMenuBar li起作用
页面布局如下:<div id='AOPTopMenu' class='TopMenuBar' >
<ul>
<li>一级菜单
<div ID='Tb_TopMenu_1' class='SecondMenuBar'>
<ul>
<li>二级菜单
<div ID='Tb_SecondMenu_1' class='ThirdMenuBar'>
<ul>
<li>三级菜单<li>
</ul>
</div>
</li>
</ul>
</div>
</li>
</ul>
</div>
正常起作用,没有应用于子层,问题在于$("#zg_Iframe").css('display', 'block');
和$("#zg_Iframe").css('display', 'none');
// 点击菜单滑动下拉,焦点不在下滑界面自动回收
$(document).ready(function () {
$(".TopMenuBar>li").hover(function () {
$(this).children(".SecondMenuBar").slideDown();
$(this).addClass("backColor");
$("#zg_Iframe").css('display', 'block');
}, function () {
$(this).children(".SecondMenuBar").slideUp();
$("#zg_Iframe").css('display', 'none');
$(this).removeClass("backColor");
}
)
})
!!
我将代码修改成$("#AOPTopMenu>ul>li").hover(function () {可以了,但是由于li是多个,导致鼠标放上后不停的执行hover的样子呢