Magento 2移动端产品标签页点击自身关闭功能实现问询

移动端视图下，打开某产品标签页（如DESCRIPTION）后，再次点击该标签页无法关闭，只能通过打开其他标签页来关闭当前标签页。尝试在footer.phtml中添加以下jQuery代码，该代码在浏览器控制台中可正常运行，但集成到文件后无法生效：

require(['jquery', 'jquery/ui'], function($){
        $(document).ready( function() {
            $(window).load(function() { 
                if($(window).width() < 900) {
                    
                    $('.product.data.items .data.switch').click(function(e){
                        var parentName = $(this).parent().attr('aria-controls');
                        if($('.data.item.content#'+parentName).attr('aria-hidden') == 'false') {
                            $('.data.item.content#'+parentName).hide();
                            $('.data.item.title#tab-label-'+parentName).removeClass('active');
                        }
                    });
                }
            });
        });
    });

问题原因分析 #

1. 嵌套$(document).ready()和$(window).load()，Magento 2的DOM加载机制下，双重等待会导致事件绑定时机过晚，容易被原生标签组件的事件覆盖。
2. 未阻止原生标签点击事件的默认行为，自定义逻辑被Magento原生标签切换逻辑冲掉。
3. 窗口宽度判断仅执行一次，窗口resize后无法重新适配状态。

解决方案 #

替换原代码为以下实现，同时注意清理缓存：

require(['jquery'], function($) {
    function initMobileTabToggle() {
        var isMobile = $(window).width() < 900;
        // 先移除已绑定的自定义事件，避免重复绑定
        $('.product.data.items .data.switch').off('click.toggleTab');
        
        if (isMobile) {
            $('.product.data.items .data.switch').on('click.toggleTab', function(e) {
                var $tabTitle = $(this).parent('.data.item.title');
                var targetContentId = $tabTitle.attr('aria-controls');
                var $targetContent = $('.data.item.content#' + targetContentId);
                
                // 检查当前标签是否处于激活状态
                if ($tabTitle.hasClass('active')) {
                    // 阻止原生事件，避免默认的标签切换逻辑触发
                    e.preventDefault();
                    e.stopPropagation();
                    
                    // 执行关闭操作
                    $tabTitle.removeClass('active');
                    $targetContent.attr('aria-hidden', 'true').hide();
                }
            });
        }
    }

    // 页面加载完成后初始化
    $(document).ready(function() {
        initMobileTabToggle();
    });

    // 窗口大小变化时重新适配
    $(window).on('resize', function() {
        initMobileTabToggle();
    });
});

操作步骤 #

1. 将上述代码替换footer.phtml中原有的对应代码块。
2. 清理Magento后台缓存：

   bin/magento cache:clean
   

3. 重新部署静态文件（根据店铺语言调整参数，比如中文可加zh_Hans_CN）：

   bin/magento setup:static-content:deploy -f
   

4. 清理浏览器缓存后，在移动端视图下测试标签页功能。

修改说明 #

• 移除不必要的jquery/ui依赖，减少资源加载。
• 封装成可复用函数，支持初始化和窗口resize时重新执行，适配设备切换场景。
• 使用命名空间事件（click.toggleTab），避免与其他自定义事件冲突，同时方便移除重复绑定。
• 直接通过hasClass('active')判断标签状态，比读取aria-hidden属性更可靠。
• 添加事件阻止方法，确保自定义关闭逻辑优先执行，不会被原生逻辑覆盖。

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