Question

用户将鼠标悬停在菜单项上，然后我想向用户显示子菜单。我想使用Jquery来显示和隐藏sub-nav-conatiner div。唯一的麻烦是我的jQuery show并隐藏所有子菜单 - 我想只显示一个。所以我需要选择当前悬停的嵌套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;');
         });

Answer 1

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

Answer 2

$('.sub-menu-header').mouseover(function () {
 $(this).children(".sub-nav-container").show();
});

Answer 3

$('.sub-menu-header').mouseover(function () {
    $('.sub-nav-container', this).show();
});

在li元素中选择嵌套div

3 个答案: