Question

当我鼠标滑出子菜单时，它会向上滑动但是如果我从主菜单中鼠标移开而没有关注子菜单那么它就不会了。这是我的代码

$('.dropdown').mouseenter(function () {
    $('.sublinks').stop(false, true).hide();
    var submenu = $(this).parent().next();
    submenu.css({
        position: 'absolute',
        top: $(this).offset().top + $(this).height() + 'px',
        left: $(this).offset().left + 'px',
        zIndex: 1
    });
    submenu.stop(true,
    true).slideDown(300);
    submenu.mouseleave(function () {
        $(this).slideUp(300);
    });
});

HTML -

<ul id ="ul1" >
        <li><a href="#" class="dropdown"></a></li>

        <li class="sublinks">
            <table cellpadding ="0" cellspacing ="0">
            <tr>
                <td><a href="Product1.aspx">Product 1
                </a></td>
            </tr>
            <tr>
                <td><a href="Product2.aspx">Product 2</a></td>
            </tr>
              <tr>
                <td><a href="Product3.aspx">Product 3</a></td>
            </tr>
            <tr>
                <td><a href="Product4.aspx">Product 4</a></td>
            </tr>
            <tr>
                <td><a href="Product5.aspx">Product 5</a></td>
            </tr>
            <tr>
                <td><a href="Product6.aspx">Product 6</a></td>
            </tr>


            </table>
        </li>

    </ul>

Answer 1

它不起作用，因为mouseleave绑定到sublinks。并且它不会发生，因为鼠标永远不会进入sublinks。您可以使用绑定到mouseleave和sublinks的{{1}}来解决此问题（如果是dropdown处理程序，您还需要检查鼠标是否未输入dropdown ）。但对我来说，这不是最好的方法。

假设将sublinks和mouseleave放在mouseenter上会更好。由于ul1和dropdown都是sublinks的子项，ul1事件将正常工作。

子菜单不会在主菜单的鼠标上滑动

1 个答案: