Question

我正在建立一个菜单栏。在栏中，每个菜单项都包含一个链接，而那些具有子菜单的菜单项也有一个可点击的区域来打开子菜单。显示和隐藏子菜单的逻辑是用JavaScript完成的，它主要通过click和mouseleave事件来切换元素的类名。

mouseleave事件已附加到所有子菜单元素，其中一个附加到其opener元素。这些事件负责在需要时隐藏子菜单。单击侦听器已附加到包含整个菜单栏的元素。此侦听器在需要时打开子菜单，或者在单击链接时关闭所有子菜单。

接下来发生的问题是：当用户点击链接时，通过将其类切换到设置display: none的类来隐藏所有子类。当然这会触发mouseleave事件，基于类切换的逻辑会再次显示子菜单。

我试图通过设置一个标志来解决这个问题，该标志在mouseleave处理程序中进行了检查。如果已设置标志，则不执行任何操作。该标志将在短暂延迟后重置。

这适用于FF和Chrome，但在IE11和Edge中导致一个奇怪的问题：如果用户在点击链接后保持鼠标不动，并在延迟（500毫秒）后开始移动鼠标，则隐藏的子菜单会弹出再次进入屏幕。

这似乎发生了，因为mouseleave事件在隐藏元素上触发，甚至在延迟之后。如何修复代码，以便IE和Edge也可以隐藏子菜单？

您可以使用下面的堆栈代码重现IE11和Edge的问题，或使用fiddle进行播放。

var WWMainMenu = {
    /// Hides all Submenus in Mainmenu
    closeAllSubs: function () {
        var subs = Array.prototype.slice.call(this.mainMenu.querySelectorAll('.ww-submenu-exp'));
        subs.forEach(function (sub) {
            sub.classList.toggle('ww-submenu');
            sub.classList.toggle('ww-submenu-exp');
            return;
        });
        return;
    },
    /// Hides a current Submenu when blurring the opener element
    closeCurrent: function (e) {
        var nextSub = e.target.nextElementSibling;
        if (this.noLeave) {
            return; /// Quit, toggling sub is not allowed
        }
        if (e.relatedTarget !== nextSub && nextSub.classList.contains('ww-submenu-exp')) {
            nextSub.classList.toggle('ww-submenu');
            nextSub.classList.toggle('ww-submenu-exp');
        }
        return;
    },
    /// Shows/hides Submenu
    toggleSubmenu: function (e) {
        var target = e.target,
            that = this;
        /// Hide all Submenus when clicking on links
        if (target.tagName === 'A') {
        	this.closeAllSubs();
            // Circumvent the race condition
            this.noLeave = true;
            window.setTimeout(function () {
                that.noLeave = false;
            }, 500);
            return;
        }
        /// Validate the target
        if (!target.classList.contains('ww-menuentry')) {
            return;
        } /// Quit, not clicked on a menuentry
        /// Toggle the visibility of Submenu
        target.nextElementSibling.classList.toggle('ww-submenu');
        target.nextElementSibling.classList.toggle('ww-submenu-exp');
        return;
    },
    /// Hides Submenu when blurring the menu itself
    hideSubmenu: function (e) {
        if (this.noLeave) {
            return; /// Quit, toggling sub is not allowed
        } 
        if (this.mainMenu.classList.contains('ww-show-menu')) {
            return; /// Quit, no autoclose when on small screens
        } 
        e.target.classList.toggle('ww-submenu');
        e.target.classList.toggle('ww-submenu-exp');
        return;
    },
    /// Initializes a WWMainmenu object
    init: function (options) {
        var subs, /// Stores all Submenu elements in Mainmenu [Array]
            entries; /// Stores all Menuentry elements in Mainmenu [Array]
        subs = Array.prototype.slice.call(options.menuBar.querySelectorAll('.ww-submenu'));
        entries = Array.prototype.slice.call(options.menuBar.querySelectorAll('.ww-menuentry'));
        /// Create prooperties
        this.mainMenu = options.menuBar; /// Reference to the Mainmenu element [HTMLElement]
        this.noLeave = false; /// Flag controlling mouseleave handling on Submenus and Menuentries
        /// Add click listener for toggling Submenus
        this.mainMenu.addEventListener('click', this.toggleSubmenu.bind(this));
        /// Add blur listeners for Submenus
        subs.forEach(function (sub) {
            sub.addEventListener('mouseleave', this.hideSubmenu.bind(this));
            return;
        }, this);
        /// Add blur listeners for Menuentries
        entries.forEach(function (entry) {
            entry.addEventListener('mouseleave', this.closeCurrent.bind(this));
            return;
        }, this);
        return this;
    }
}.init({
	menuBar: document.querySelector('.ww-mainmenu-bar')
});

a {
    text-decoration: none;
}
/* Menu system */
.ww-mainmenu-bar {
	display: block;
	background-color: rgba(64, 64, 64, 1);
	font-size: 1.0em;
	white-space: nowrap;
}
.ww-mainmenu {
	display: inline-block;
	white-space: nowrap;
	color: rgba(255, 255, 255, 1);
}
.ww-menuentry, .ww-menuentry a, .ww-submenu-exp a {
	color: rgba(255, 255, 255, 1);
}
.ww-menuentry {
	padding: 5px;
}
.ww-menuentry:hover {
	color: rgba(255, 255, 255, 1);
	background: rgba(70, 130, 180, 1);
}
.ww-menuentry::after {
	content: "\2261";
	position: absolute;
	right: 10px;
	cursor: default;
	color: rgba(255, 255, 255, 1);
}
.ww-mainmenu > .ww-menuentry::after {
	position: relative;
	content: "\2261";
	right: 0px;
	margin-left: 10px;
	color: rgba(255, 255, 255, 1);	
}
.ww-submenu, .ww-submenu-exp {
	display: none;
	position: absolute;
	min-width: calc(160px);
	background: rgba(64, 64, 64, 1);
	font-size: 0.95em;
	z-index: 20;
	white-space: nowrap;
	margin-left: 2em;
	padding: 5px;
	border: 1px solid rgba(0, 0, 0, 0.5);
}
.ww-submenu-exp {
	display: block;
}
.ww-submenu-exp > a {
	display: block;
	padding: 5px;
}
.ww-submenu-exp > a:hover {
	background: rgba(70, 130, 180, 1);
}

<!-- MAIN MENU -->
<nav class="ww-mainmenu-bar">
    <div class="ww-mainmenu">
        <div class="ww-menuentry"><a href="#">Main link</a></div>
        <div class="ww-submenu">
            <a href="#">Link 1</a>
            <div class="ww-menuentry"><a href="#">Link 2</a></div>
            <div class="ww-submenu">
                <a href="#">Link 2.1</a>
                <a href="#">Link 2.2</a>
            </div>					
            <div class="ww-menuentry"><a href="#">Link 3</a></div>
            <div class="ww-submenu">
                <a href="#">Link 3.1</a>
                <a href="#">Link 3.2</a>
            </div>
        </div>
    </div>
</nav>

Answer 1

在SELECT animation_id, animation_name, animation_group FROM animations WHERE animation_id = '45' OR active = true ORDER BY animation_group, animation_name函数中，为什么不明确地呼叫hideSubmenu而不是hide()？

Mouseleave种族条件

1 个答案: