[英]Selecting nested div in a li element
The user hovers the mouse over a menu item, i then want to show the submenu to the user.用户将鼠标悬停在菜单项上,然后我想向用户显示子菜单。 I want to use Jquery to show and hide the sub-nav-conatiner div.
我想使用 Jquery 来显示和隐藏 sub-nav-conatiner div。 the only trouble is my jQuery show and hides ALL submenus - i want to display just one.
唯一的麻烦是我的 jQuery 显示并隐藏所有子菜单 - 我只想显示一个。 So I need to select the currently hovered nested div, hope that makes sense.
所以我需要 select 当前悬停的嵌套 div,希望这是有道理的。 I have tried all sorts with no luck:(
我已经尝试了各种没有运气:(
<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 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;');
});
Use this
.使用
this
。
$('.sub-menu-header').mouseover(function () {
$(this).find('div.sub-nav-container').show();
});
You can simplify the code, however - no need for separate mouseover
and mouseleave
handlers.但是,您可以简化代码 - 不需要单独的
mouseover
和mouseleave
处理程序。 Just use .hover()
with a single function argument:只需将
.hover()
与单个 function 参数一起使用:
$('.sub-menu-header').hover(function () {
$(this).find('div.sub-nav-container').toggle();
});
$('.sub-menu-header').mouseover(function () {
$(this).children(".sub-nav-container").show();
});
$('.sub-menu-header').mouseover(function () {
$('.sub-nav-container', this).show();
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.