在WooCommerce Storefront子主题中，如何让下拉父项搭配切换按钮可点击？

我明白你的需求：让父菜单本身能正常点击跳转，同时旁边有独立的切换按钮用来展开/收起下拉子菜单对吧？结合jQuery Smartmenus的Bootstrap 4适配工具，我给你整理了一套一步步落地的方案：

1. 确保基础资源加载到位 #

先在子主题的functions.php里添加代码，把需要的样式和脚本都加载好（注意路径要和你子主题里的文件位置对应）：

function my_child_theme_enqueue_scripts() {
    // 加载Bootstrap 4 CSS（如果主题还没引入）
    wp_enqueue_style( 'bootstrap-css', get_stylesheet_directory_uri() . '/css/bootstrap.min.css', array(), '4.0.0' );
    
    // 加载Smartmenus核心样式和Bootstrap适配样式
    wp_enqueue_style( 'smartmenus-core', get_stylesheet_directory_uri() . '/css/jquery.smartmenus.css', array(), '1.1.1' );
    wp_enqueue_style( 'smartmenus-bootstrap', get_stylesheet_directory_uri() . '/css/jquery.smartmenus.bootstrap.css', array('bootstrap-css', 'smartmenus-core'), '1.0.0' );
    
    // 按顺序加载JS：jQuery → Bootstrap → Smartmenus核心 → Bootstrap适配脚本
    wp_enqueue_script( 'bootstrap-js', get_stylesheet_directory_uri() . '/js/bootstrap.min.js', array('jquery'), '4.0.0', true );
    wp_enqueue_script( 'smartmenus-core-js', get_stylesheet_directory_uri() . '/js/jquery.smartmenus.js', array('jquery'), '1.1.1', true );
    wp_enqueue_script( 'smartmenus-bootstrap-js', get_stylesheet_directory_uri() . '/js/jquery.smartmenus.bootstrap.js', array('jquery', 'smartmenus-core-js', 'bootstrap-js'), '1.0.0', true );
    
    // 加载自定义配置脚本
    wp_enqueue_script( 'my-custom-menu-js', get_stylesheet_directory_uri() . '/js/custom-menu.js', array('jquery', 'smartmenus-bootstrap-js'), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_child_theme_enqueue_scripts' );

2. 修改菜单HTML结构 #

Storefront默认的菜单结构需要调整，让父项的链接和切换按钮分开。用WordPress的菜单过滤器来实现：

function my_smartmenus_menu_item_args( $args, $item, $depth ) {
    // 只处理顶级的父菜单（有子项的菜单）
    if ( $depth === 0 && in_array( 'menu-item-has-children', $item->classes ) ) {
        // 给父链接加包裹元素，后面追加切换按钮
        $args['link_before'] = '<span class="menu-item-link-wrap">';
        $args['link_after'] = '</span><button type="button" class="navbar-toggler dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><span class="sr-only">Toggle dropdown</span></button>';
        // 给父项li加上Smartmenus需要的类
        $item->classes[] = 'dropdown';
    }
    return $args;
}
add_filter( 'nav_menu_item_args', 'my_smartmenus_menu_item_args', 10, 3 );

3. 配置Smartmenus实现点击逻辑 #

在子主题的js/custom-menu.js里添加以下代码，让切换按钮负责展开子菜单，同时保留父链接的跳转功能：

jQuery(document).ready(function($) {
    // 初始化Smartmenus
    $('.main-navigation ul.nav').smartmenus({
        // 指定用点击切换按钮的方式展开子菜单
        subMenusTrigger: 'click',
        // 不阻止父链接的点击行为
        keepFocus: false,
        // 标记当前活跃的菜单项
        markCurrentItem: true,
        // 子菜单展开/收起的动画
        showFunction: function($ul, complete) {
            $ul.addClass('show').slideDown(200, complete);
        },
        hideFunction: function($ul, complete) {
            $ul.removeClass('show').slideUp(200, complete);
        }
    });

    // 修正切换按钮的点击行为，避免和Smartmenus冲突
    $('.navbar-toggler.dropdown-toggle').on('click', function(e) {
        e.stopPropagation();
        $(this).closest('li.menu-item-has-children').toggleClass('open');
    });
});

4. 微调CSS适配主题风格（可选） #

可以加一点自定义CSS让菜单更协调，比如调整切换按钮的位置和样式：

/* 父菜单项的相对定位，让切换按钮能正确对齐 */
li.menu-item-has-children.dropdown {
    position: relative;
}

/* 切换按钮的样式适配 */
li.menu-item-has-children .navbar-toggler.dropdown-toggle {
    border: none;
    background: transparent;
    padding: 0 8px;
    margin-left: 4px;
    font-size: 0.8em;
    cursor: pointer;
}

/* 子菜单展开时的样式 */
li.menu-item-has-children.open ul.sub-menu {
    display: block;
}

5. 测试验证 #

做完以上步骤后，记得清空WordPress缓存和浏览器缓存，然后测试两个核心功能：

• 点击父菜单的文字链接，能正常跳转到对应页面；
• 点击旁边的切换按钮，能展开/收起下拉子菜单；
• 移动端下菜单的响应式行为也能正常工作。

如果遇到菜单不展开的问题，先打开浏览器控制台看有没有JS错误，检查资源路径是否正确，再确认HTML结构里的类是否正确添加。

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