我的Jquery代码有一些问题,我不明白为什么…
我正在尝试构建一个带有垂直下拉菜单的导航:
主导航已经有了一个可以工作的带有滚动图像的脚本,内容的Ajax调用也是如此…
不管怎样,我用自己写的代码试了一下:这是我的Jquery代码:
function nav() {
$('ul li').mouseover(function() {
$(this).find('#submenu').show();
});
$('ul li').mouseleave(function() {
$('ul li #submenu').hide();
});
$('ul li #submenu').mouseleave(function() {
$('ul li #submenu').hide();
;
});
};
$(document).ready(function() {
nav();
});
HTML:
<li><a href="#home"><img class="fadeim" src="themes/menu/home=1.png" data-hoverimg="themes/menu/home=2.png"/></a></li>
<li><a href="#lager"><img class="fadeim" src="themes/menu/lager=1.png" data-hoverimg="themes/menu/lager=2.png" /></a></li>
<ul class="submenu">
<li><a href="#">Mashable</a></li>
<li><a href="#">CNET</a></li>
</ul>
<li><a href="#anlaesseN"><img class="fadeim" src="themes/menu/anlaesse=1.png" data-hoverimg="themes/menu/anlaesse=2.png" /></a></li>
<ul class="submenu">
<li><a href="#">Mashable</a></li>
<li><a href="#">CNET</a></li>
</ul>
<li><a href="#images"><img class="fadeim" src="themes/menu/foto=1.png" data-hoverimg="themes/menu/foto=2.png" /></a></li>
有人能帮我解决这个问题吗?感谢
我认为你指的是$(this).find('#submenu').show();
中的.
而不是#
您没有ID #submenu
,只有类.submenu
。
更正后的代码应为:
function nav() {
$('ul li').mouseover(function() {
$(this).find('.submenu').show();
});
$('ul li').mouseleave(function() {
$('ul li .submenu').hide();
});
$('ul li .submenu').mouseleave(function() {
$('ul li .submenu').hide();
;
});
};
$(document).ready(function() {
nav();
});
EDIT:还要检查您的标记,您正在寻找带有.find()
的.submenu
,但ul.submenu
不是李的子级。李实际上在同一DOM级别上(.siblings()在这里可以工作),所以要获得更正确的标记,应该在李中嵌套ul,而不是在ul中嵌套ul。然后你就可以使用我上面写的代码了。像这样:
<li><a href="#lager">lager</a>
<ul class="submenu">
<li><a href="http://www.mashable.com">Mashable</a>
</li>
<li><a href="http://www.cnet.com">CNET</a>
</li>
</ul>
</li>
Demo(您需要修复css…)