菜单链接仅在index.html生效，其他页面失效问题求助

问题说明 #

菜单弹窗仅在index.html页面正常触发，在hotelam.html等其他页面点击菜单按钮无任何反应。所有页面的导航HTML结构一致，问题出在JavaScript代码中。

问题根源 #

原JavaScript代码存在两处关键问题：

1. 使用$('section').closest('body')定位元素：如果非首页（如hotelam.html）的DOM结构中没有<section>标签，该选择器无法找到目标元素，导致后续无法定位弹窗菜单，点击事件直接失效。
2. 代码中的"use strict"使用了中文引号，属于语法错误，会影响代码执行逻辑。

修复后的JavaScript代码 #

$(document).ready(function(){
    'use strict';

    $('.menu-container').each(function(index) {
        $(this).find('.circle').attr('menu-link', index);
        // 克隆菜单到body并添加标识
        $(this).find('.list-menu').clone().appendTo('body').attr('menu-link', index);
        // 隐藏原页面中的菜单，避免重复渲染
        $(this).find('.list-menu').hide();
    });

    $('.menu-container .circle').click(function() {
        // 直接从body中查找对应标识的弹窗菜单
        var linkedMenu = $('body').find('.list-menu[menu-link="' + $(this).attr('menu-link') + '"]');
        linkedMenu.toggleClass('reveal-modal');
    });

    // 直接绑定关闭按钮的点击事件，确保所有页面都能触发
    $('body').on('click', '.close-iframe', function() {
        $(this).closest('.list-menu').toggleClass('reveal-modal');
    });
});

额外优化提示 #

• 检查hotelam.html的HTML结构，移除最后一行多余的</div>标签，避免DOM结构错误影响渲染。
• 确保所有页面都正确引入了jQuery库，否则所有JavaScript功能都会失效。

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