如何解决在li元素中选择嵌套的div
| 用户将鼠标悬停在菜单项上,然后我想向用户显示子菜单。我想使用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;\');
});
解决方法
使用
this
。
$(\'.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();
});
,$(\'.sub-menu-header\').mouseover(function () {
$(this).children(\".sub-nav-container\").show();
});
,$(\'.sub-menu-header\').mouseover(function () {
$(\'.sub-nav-container\',this).show();
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。