用户将鼠标悬停在菜单项上,然后我想向用户显示子菜单。我想使用 Jquery 来显示和隐藏 sub-nav-conatiner div。唯一的麻烦是我的 jQuery 显示和隐藏所有子菜单 - 我只想显示一个。所以我需要选择当前悬停的嵌套 div,希望这是有道理的。我试过各种方法都没有运气:(
<ul>
<li><a href="/classifieds/farming">
Agriculture & Farming</a>
</li>
<li class="sub-menu-header"><a href="#">Test Header </a>
<div class="sub-nav-container">
<div class="sub-panel">
<ul>
<li><a href="">Electrical Goods</a></li>
<li><a href="">Electrical Goods</a></li>
</ul>
<div class="clr"></div>
</div>
</div>
</li>
...
</ul>
jQuery
$(document).ready(function () {
$('.sub-nav-container').css('display', 'none !important;');
});
$('.sub-menu-header').mouseover(function () {
?????????
});
$('.sub-menu-header').mouseleave(function () {
$('.sub-nav-container').css('display', 'none !important;');
});
最佳答案
使用这个
。
$('.sub-menu-header').mouseover(function () {
$(this).find('div.sub-nav-container').show();
});
但是您可以简化代码 - 不需要单独的 mouseover
和 mouseleave
处理程序。只需将 .hover()
与单个函数参数一起使用:
$('.sub-menu-header').hover(function () {
$(this).find('div.sub-nav-container').toggle();
});
关于javascript - 在 li 元素中选择嵌套的 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6113017/