WordPress TrendyNews主题：如何让移动端整菜单项触发子菜单折叠？

TrendyNews主题默认仅将子菜单折叠触发绑定在右侧箭头/图标上，我们可以通过自定义JavaScript扩展点击区域到整个菜单项容器，以下是具体实现方法：

方法一：利用主题自定义功能添加JS代码 #

多数WordPress主题（包括TrendyNews）支持在自定义izer中添加自定义JS，操作步骤如下：

1. 进入WordPress后台 → 外观 → 自定义
2. 找到「自定义JS」或「额外代码」类选项（不同主题命名可能略有差异）
3. 粘贴以下代码：

document.addEventListener('DOMContentLoaded', function() {
  // 定位移动端菜单下所有包含子菜单的菜单项
  const parentMenuItems = document.querySelectorAll('.mobile-menu .menu-item-has-children');
  
  parentMenuItems.forEach(item => {
    item.addEventListener('click', function(e) {
      // 找到主题用于切换子菜单的箭头元素（请根据实际类名调整）
      const toggleBtn = this.querySelector('.submenu-toggle');
      // 如果点击的不是箭头本身，触发箭头的点击事件
      if (toggleBtn && !e.target.closest('.submenu-toggle')) {
        toggleBtn.click();
        // 阻止父菜单链接跳转（若需要父菜单可跳转，删除此行）
        e.preventDefault();
      }
    });
  });
});

4. 保存更改即可生效

注意：需确认主题中切换子菜单的箭头元素类名，可通过浏览器开发者工具（F12）查看箭头元素的class，替换代码中的.submenu-toggle。

方法二：通过子主题添加自定义脚本（避免主题更新丢失修改） #

1. 在子主题目录下创建js文件夹，新建custom-mobile-menu.js文件，将上述JS代码粘贴进去
2. 编辑子主题的functions.php文件，添加以下代码注册并加载脚本：

function enqueue_custom_mobile_menu_script() {
  wp_enqueue_script(
    'custom-mobile-menu',
    get_stylesheet_directory_uri() . '/js/custom-mobile-menu.js',
    array('jquery'),
    '1.0',
    true
  );
}
add_action('wp_enqueue_scripts', 'enqueue_custom_mobile_menu_script');

3. 保存文件，刷新前端页面即可生效

额外说明 #

• 如果希望父菜单项点击时既展开子菜单又跳转链接，删除JS代码中的e.preventDefault();即可，但这种体验可能让用户困惑，更推荐将父菜单的URL设置为#（后台菜单编辑中修改），仅作为子菜单入口。
• 不要直接修改主题核心文件，否则主题更新后所有自定义修改都会丢失，使用子主题或自定义izer功能是更稳妥的方式。

内容的提问来源于stack exchange，提问作者Mladen Dubovac