奇怪的鼠标悬停和mouseleave行为

Question

我一定不理解mouseover / mouseleave，因为我可以一次下载多个菜单。如果我使用.hover(fOver, fLeave)，我会得到完全相同的行为。

http://jsfiddle.net/abalter/zhbjsvm4/

http://plnkr.co/edit/kFjomgrNDmlqP6MckOkW?p=preview

（接受你的选择）

HTML

<p>viewport width: <span id="viewport-width"></span> </p>
<div class="container-fluid" id="top-menu-container">
    <ul id="top-menu">
        <li class="top-menu-item" id="item-top-1" data-drop-down-for="sub-menu-1">
            <p class="drop-down-toggle">top 1</p>
            <ul class="sub-menu" id="sub-menu-1">
                <li class="sub-menu-item"><a>item 1</a>

                    <ul class="sub-sub-menu" id="side-menu-list-1-1">
                        <li class="sub-sub-menu-item">item 1</li>
                        <li class="sub-sub-menu-item">item 2</li>
                        <li class="sub-sub-menu-item">item 3</li>
                    </ul>
                </li>
                <li class="sub-menu-item"><a>item 2</a>

                </li>
                <li class="sub-menu-item"><a>item 3</a>

                    <ul class="sub-sub-menu" id="side-menu-list-1-3">
                        <li class="sub-sub-menu-item">item 1</li>
                        <li class="sub-sub-menu-item">item 2</li>
                        <li class="sub-sub-menu-item">item 3</li>
                    </ul>
                </li>
            </ul>
        </li>
        <li class="top-menu-item" id="item-top-2" data-drop-down-for="sub-menu-2">
            <p class="drop-down-toggle">top 2</p>
            <ul class="sub-menu" id="sub-menu-2">
                <li class="sub-menu-item"><a>item 1</a>

                    <ul class="sub-sub-menu" id="sub-menu-2-1">
                        <li class="sub-sub-menu-item">item 1</li>
                        <li class="sub-sub-menu-item">item 2</li>
                        <li class="sub-sub-menu-item">item 3</li>
                    </ul>
                </li>
                <li class="sub-menu-item"><a>item 2</a>

                    <ul class="sub-sub-menu" id="sub-menu-2-2">
                        <li class="sub-sub-menu-item">item 1</li>
                        <li class="sub-sub-menu-item">item 2</li>
                        <li class="sub-sub-menu-item">item 3</li>
                    </ul>
                </li>
                <li class="sub-menu-item"><a>item 3</a>

            </ul>
            </li>
            <li class="top-menu-item" id="item-top-3" data-drop-down-for="sub-menu-3">
                <p class="drop-down-toggle">top 3</p>
                <ul class="sub-menu" id="sub-menu-3">
                    <li class="sub-menu-item"><a>item 1</a>

                        <ul class="sub-sub-menu" id="sub-menu-3-1">
                            <li class="sub-sub-menu-item">item 1</li>
                            <li class="sub-sub-menu-item">item 2</li>
                            <li class="sub-sub-menu-item">item 3</li>
                        </ul>
                    </li>
                    <li class="sub-menu-item"><a>item 2</a>

                        <ul class="sub-sub-menu" id="sub-menu-3-2">
                            <li class="sub-sub-menu-item">item 1</li>
                            <li class="sub-sub-menu-item">item 2</li>
                            <li class="sub-sub-menu-item">item 3</li>
                        </ul>
                    </li>
                    <li class="sub-menu-item"><a>item 3</a>

                    </li>
                </ul>
            </li>
    </ul>
</div>

的Javascript

var viewStyle = "desktop";

$('#viewport-width').text($(window).width());
if ($(window).width() <= 768) {
    viewStyle = "mobile";
} else {
    viewStyle = "desktop";
}

$(window).trigger('resize');

$('#viewport-width').text($(window).width() + "  " + viewStyle + "  " + ($(window).width() <= 768));

$(window).resize(function () {

    $('#viewport-width').text($(window).width() + "  " + viewStyle + "  " + ($(window).width() <= 768));

    if ($(window).width() <= 768) {
        viewStyle = "mobile";
    } else {
        viewStyle = "desktop";
    }

});


var activeSubMenuID = '';

$('.top-menu-item')
    .mouseover(function (e) {
    if (viewStyle == "desktop") {
        console.log("mouseover");
        console.log("mouse over " + e.target.id);
        //console.log(e.target);
        var target = $(e.target);
        //console.log(target[0]);
        var targetSubMenu = target.next('.sub-menu');
        //console.log(targetSubMenu[0]);
        var targetSubMenuID = targetSubMenu.prop('id');
        targetSubMenu.slideDown("fast");
    }
})
    .mouseleave(function (e) {
    if (viewStyle == "desktop") {
        console.log("mouse leave");
        console.log("mouse leaving " + e.target.id);
        //console.log(e.target);
        var target = $(e.target);
        //console.log(target[0]);
        var targetSubMenu = target.next('.sub-menu');
        //console.log(targetSubMenu[0]);
        var targetSubMenuID = targetSubMenu.prop('id');
        targetSubMenu.slideUp("fast");
    }
});


$(".drop-down-toggle").on('click', function (e) {
    console.log(e.target);
    var target = $(e.target);
    console.log(target[0]);
    var targetSubMenu = target.next('.sub-menu');
    console.log(targetSubMenu[0]);
    var targetSubMenuID = targetSubMenu.prop('id');
    //alert("active submenu " + activeSubMenuID + " target sub menu " + targetSubMenuID);
    if (viewStyle == "mobile") {
        if (activeSubMenuID == targetSubMenuID) {
            //alert("closing " + targetSubMenuID);
            $('#' + activeSubMenuID).slideUp("slow");
            activeSubMenuID = '';
        } else if (activeSubMenuID === '') {
            //alert("opening " + targetSubMenuID);
            $('#' + targetSubMenuID).slideDown("slow");
            activeSubMenuID = targetSubMenuID;
        } else {
            //alert("closing " + activeSubMenuID);
            $('#' + activeSubMenuID).slideUp("slow", function () {
                //alert("opening " + targetSubMenuID);
                $('#' + targetSubMenuID).slideDown("slow");
                activeSubMenuID = targetSubMenuID;
            });

            // other method tried
            // just consecutively after
            //alert("opening " + targetSubMenuID);
            //$('#' + targetSubMenuID).slideToggle("slow");
            //activeSubMenuID = targetSubMenuID;
        }
    }

});