0

サブメニューをマウスアウトすると上にスライドしますが、サブメニューにフォーカスせずにメインメニューからマウスアウトすると表示されません。これが私のコードです

$('.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>
4

1 に答える 1

1

mouseleaveにバインドされているため、機能しませんsublinks。そして、マウスが入ることは決してないので、それは起こりませんsublinks。との両方にmouseleaveバインドしてこれを修正できます（ハンドラーの場合は、マウスが入らないかどうかも確認する必要があります）。しかし、私にとっては、それは最善のアプローチではありません。sublinksdropdowndropdownsublinks

mouseleaveとの両方を配置する方がよいと仮定mouseenterしul1ます。dropdownとの両方sublinksがの子であるul1ため、mouseleaveイベントは正しく機能します。

于 2012-08-24T20:16:24.377 に答える