jQuery 下拉问题（无法保持子菜单可见）

Posted 2023-05-08

【中文标题】jQuery 下拉问题（无法保持子菜单可见）

【英文标题】：jQuery dropdown issue (cant keep the submenu visible)

【发布时间】：2012-03-08 23:20:26

【问题描述】：

我正在使用 jQuery 构建一个小的下拉菜单，但我遇到了一个小问题。 当我进入菜单时，它会下拉，但是当我想用鼠标转到下拉部分时，它会返回（隐藏）。 这是因为菜单的标记与大多数 jQuery 下拉菜单有点不同（我认为）。

如果用户悬停 a 标签，菜单应该是可见的，但是因为 div 标签不是 a 标签的子标签，所以如果用户离开 a 标签，它会淡出。有没有办法来解决这个问题？我在网上找不到任何关于此的内容。

菜单标记

     <ul>
        <li>
            <span>Some text</span>
            <a href="#"><img src="icon.png"/></a>
            <div>here comes the dropdown list</div>
        </li>
        <li>
            <span>Some text</span>
            <a href="#"><img src="icon.png"/></a>
            <div>here comes the dropdown list</div>
        </li>
        <li>
            <span>Some text</span>
            <a href="#"><img src="icon.png"/></a>
            <div>here comes the dropdown list</div>
        </li>
    </ul>

jQuery 代码标记

    $('a').hover(function()                     

        $(this).next('div').fadeIn(200);

    ,function()

        $(this).next('div').fadeOut(200);

    );

【参考方案1】：

淡出不应该绑定到锚点，而是绑定到 div。

你可以在锚点悬停时开始显示 div：

$('a').on("mouseenter", function() 
  $(this).next('div').fadeIn(200);
);

然后当鼠标离开时隐藏div：

$('div').on("mouseleave", function() 
  $(this).fadeOut(200);
);

【参考方案2】：

这是因为您的悬停事件针对的是链接元素，当您将鼠标悬停在链接之外时，您会隐藏菜单项。

为了防止这种行为，只需定位父元素，在这种情况下

：

$('li').hover(function()

    $(this).children('div').fadeIn(200);

,function()

    $(this).children('div').fadeOut(200);

);

【讨论】：

我知道，但正如我提到的，菜单必须由 a 标签触发，而不是使用 li 标签，因为菜单有一种拆分布局。