WordPress自定义主题：将子菜单触发方式从悬停改为点击

嘿，我来帮你搞定这个子菜单触发方式的修改，不用怕JS，跟着步骤一步步来就行！

首先，咱们得先处理CSS，因为你提到子菜单是通过CSS隐藏的，先把原来的悬停触发给关掉，换成点击激活的样式：

第一步：修改CSS样式 #

找到你主题的style.css文件（可以在WordPress后台「外观-主题文件编辑器」里找，或者用FTP下载修改），做这几个修改：

1. 先找到原来控制悬停显示子菜单的代码，大概长这样：

.menu-item-has-children:hover .sub-menu {
    display: block;
}

把它注释掉或者直接删掉，这样悬停就不会触发子菜单了。

2. 添加点击激活的样式：

/* 默认隐藏所有子菜单 */
.menu-item-has-children .sub-menu {
    display: none;
}

/* 当菜单项有active类时，显示子菜单 */
.menu-item-has-children.active .sub-menu {
    display: block;
}

/* 可选：给带子菜单的项加个小箭头，提示用户可点击 */
.menu-item-has-children > a::after {
    content: '▼';
    margin-left: 5px;
    font-size: 0.8em;
}
.menu-item-has-children.active > a::after {
    content: '▲';
}

第二步：完善JavaScript代码 #

你给出的那段tdMenu代码是主题里的菜单核心逻辑，咱们把它补充完整，添加点击触发的功能。直接替换原来的那段JS代码（或者在后面补充完整）：

你原来的代码片段：
//top menu works only on 1 level, the other submenus are hidden from css
//on tablets, wide level 3 submenus may go out of screen
var tdMenu = {};
(function(){
'use strict';
tdMenu = {
//submenu items (used on unbind)
_itemsWithSubmenu: null,
//main menu (used on unbind)
_mainMenu: null,
//on touch - when you click outside the m...

替换成下面完整的代码：

//top menu works only on 1 level, the other submenus are hidden from css 
//on tablets, wide level 3 submenus may go out of screen 
var tdMenu = {}; 
(function(){ 
'use strict'; 
tdMenu = { 
    //submenu items (used on unbind) 
    _itemsWithSubmenu: null, 
    //main menu (used on unbind) 
    _mainMenu: null, 

    //初始化菜单点击事件
    init: function() {
        //获取所有带子菜单的菜单项（WordPress默认给这类项加menu-item-has-children类，如果你的主题不一样，换成对应类名）
        this._itemsWithSubmenu = document.querySelectorAll('.menu-item-has-children');
        //获取主菜单容器，换成你主题里实际的选择器，比如#top-menu或者.nav-menu
        this._mainMenu = document.querySelector('.main-menu');

        //绑定点击事件
        this.bindClickEvents();
        //绑定点击菜单外部关闭所有子菜单的事件
        this.bindOutsideClick();
    },

    //给带子菜单的项绑定点击事件
    bindClickEvents: function() {
        var self = this;
        this._itemsWithSubmenu.forEach(function(menuItem) {
            menuItem.addEventListener('click', function(e) {
                //阻止事件冒泡，避免触发外部点击关闭
                e.stopPropagation();
                //切换当前项的active类，控制子菜单显示/隐藏
                menuItem.classList.toggle('active');
                //关闭其他已经打开的子菜单，避免多个子菜单同时展开
                self.closeOtherSubmenus(menuItem);
            });
        });
    },

    //关闭除当前点击项外的其他子菜单
    closeOtherSubmenus: function(excludeItem) {
        this._itemsWithSubmenu.forEach(function(item) {
            if (item !== excludeItem) {
                item.classList.remove('active');
            }
        });
    },

    //点击菜单外部时，关闭所有子菜单
    bindOutsideClick: function() {
        var self = this;
        document.addEventListener('click', function() {
            self._itemsWithSubmenu.forEach(function(item) {
                item.classList.remove('active');
            });
        });
    }
}; 

//页面加载完成后初始化菜单
document.addEventListener('DOMContentLoaded', function() {
    tdMenu.init();
});
})();

几个要注意的小细节： #

• 如果你的主题里，带子菜单的菜单项不是menu-item-has-children类，改成你主题实际的类名（可以用浏览器开发者工具查看元素确认）
• this._mainMenu = document.querySelector('.main-menu');这里的.main-menu要换成你主题主菜单的实际选择器，比如#top-nav之类的
• 测试一下效果：点击带箭头的菜单项，子菜单应该展开，点击其他地方或者再次点击该菜单项，子菜单关闭

这样就完成了从悬停到点击触发子菜单的修改啦！

内容的提问来源于stack exchange，提问作者Awesome Sauce