移动端顶部栏Ajax购物车弹窗无法正常关闭问题排查

先帮你梳理下现有代码的核心问题：

• 旧的jQuery事件绑定方法live()早已被废弃，很容易导致事件失效；
• 目前只实现了弹窗打开的逻辑，完全缺少再次点击购物车关闭、页面滚动关闭的事件处理。

下面是具体的修复步骤：

1. 重构JS事件逻辑（替换废弃方法+补充关闭逻辑） #

打开javascript\common.js，把原来的Ajax Cart相关代码替换成以下内容：

/* Ajax Cart 重构版 */
// 委托绑定购物车点击事件（兼容动态加载元素）
$(document).on('click', '#cart > .heading a', function(e) {
    e.preventDefault();
    const $cart = $('#cart');
    
    // 切换弹窗状态：已激活就关闭，未激活则打开并加载内容
    if ($cart.hasClass('active')) {
        $cart.removeClass('active');
    } else {
        $cart.addClass('active');
        // 仅首次打开时加载购物车内容，避免重复请求
        if (!$cart.data('loaded')) {
            $cart.load('index.php?route=module/cart #cart > *', function() {
                $cart.data('loaded', true);
            });
        }
    }
});

// 绑定页面滚动关闭弹窗事件
$(window).on('scroll', function() {
    const $cart = $('#cart');
    if ($cart.hasClass('active')) {
        $cart.removeClass('active');
    }
});

// 可选：点击弹窗外部自动关闭（提升体验）
$(document).on('click', function(e) {
    const $cart = $('#cart');
    // 点击区域不是购物车本身，且弹窗处于激活状态时关闭
    if (!$cart.is(e.target) && $cart.has(e.target).length === 0 && $cart.hasClass('active')) {
        $cart.removeClass('active');
    }
});

2. 调整HTML结构匹配事件选择器 #

检查header.tpl的购物车结构，确保JS选择器能正确命中点击元素，你可以把现有代码修改为：

<div id="cart" class="cart">
    <div class="heading">
        <a href="javascript:void(0);">
            <span class="text-label"><?php echo $cart; ?></span>
        </a>
    </div>
    <!-- 购物车弹窗内容会被动态加载到这里 -->
    <div class="cart-content"></div>
</div>

（关键是给外层容器加上id="cart"，并通过<a>标签明确点击区域）

3. 确保CSS匹配弹窗状态 #

你的CSS里需要有.cart.active对应的弹窗显示样式，比如：

.cart .cart-content {
    display: none;
}
.cart.active .cart-content {
    display: block;
    /* 移动端弹窗定位样式示例 */
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    max-width: 320px;
    height: 100vh;
    background: #fff;
    z-index: 9999;
}

核心优化点说明 #

• 用$(document).on()替代废弃的live()，能稳定支持动态生成的元素，避免事件绑定失效；
• 新增点击购物车切换弹窗状态的逻辑，实现“点击打开/关闭”的交互；
• 绑定滚动事件，用户滚动页面时自动关闭弹窗；
• 可选的外部点击关闭逻辑，更符合移动端用户的操作习惯。

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