在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();
});