在li元素中选择嵌套div

问题描述

用户将鼠标悬停在菜单项上，然后要向用户显示子菜单。我想使用Jquery来显示和隐藏sub-nav-conatiner div。唯一的麻烦是我的jQuery显示和隐藏所有子菜单 - 我想显示只有一个。所以我需要选择当前悬停的嵌套div，希望有意义。我尝试过各种各样的没有运气:(

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. the only trouble is my jQuery show and hides ALL submenus - i want to display just one. So I need to select the currently hovered nested div, hope that makes sense. 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

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

推荐答案

使用 c $ c>。

Use this.

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

可以简化代码，但不需要单独的 mouseover 和 mouseleave 处理程序。只需使用具有单个函数参数的 .hover（）：

You can simplify the code, however - no need for separate mouseover and mouseleave handlers. Just use .hover() with a single function argument:

$('.sub-menu-header').hover(function () {
    $(this).find('div.sub-nav-container').toggle();
});

这篇关于在li元素中选择嵌套div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！