JQuery菜单仅首次显示，刷新浏览器后才可再次显示问题求助

问题现象 #

• 菜单首次触发可正常显示
• 点击菜单外部关闭后，再次触发要么完全无响应，要么短暂显示后立刻消失
• 仅能通过刷新浏览器恢复正常

核心问题分析 #

1. 重复绑定事件：每次调用wSelect()都会重复给<html>绑定点击隐藏事件，事件叠加后导致菜单刚显示就被触发隐藏（对应现象2）
2. 事件冒泡未阻止：触发菜单显示的元素点击事件会冒泡到<html>，触发隐藏逻辑
3. 滚动事件重复绑定：每次调用wSelect()都会给window绑定滚动事件，造成性能浪费和逻辑冲突

修复后的代码 #

调整后的JS代码 #

$(document).ready(function() {
    var $menu = $("#selectCourse");
    var menuYloc = parseInt($menu.css("top").replace("px", ""));

    // 滚动事件只绑定一次
    $(window).scroll(function () { 
        var offset = menuYloc + $(document).scrollTop() + "px";
        $menu.animate({top: offset}, {duration:500, queue:false});
    });

    // 点击html区域隐藏菜单，排除菜单自身点击
    $("html").click(function(e) {
        if(!$(e.target).closest("#selectCourse").length) {
            $menu.hide("fast");
        }
    });

    // 阻止菜单内部点击事件冒泡
    $menu.click(function(e) {
        e.stopPropagation();
    });
});

// 仅负责显示菜单
function wSelect() {
    $("#selectCourse").show("fast");
}

调整后的HTML代码（补充触发按钮示例） #

<button onclick="wSelect()">打开课程选择菜单</button>

<div id="selectCourse">
    <div id="floatMenu">
        <p>Select a Course</p>
        <ul id="choices" class="menu">
            <li>
                <a href="course1.html">
                    <img src="course1.png" height="40">Course 1</a>
            </li>
            <li>
                <a href="course2.html">
                    <img src="course2.png" height="40">Course 2</a>
            </li>
        </ul>
    </div>
</div>

保留原CSS代码（无需修改） #

#selectCourse {
    display: none;
    width: 300px;
}
   
#floatMenu {
    position: absolute;
    background-color: #0078d0;
    border: 1px solid #000;
    top: 80px;
    right: 10%;
    margin: 5px;
}
#floatMenu ul {
    margin: 20px 30px 20px 0;
    font-size: 16px;
    list-style-type: none;
}
#floatMenu ul li a {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #ccc;
    padding: 5px 10px;
}
#floatMenu ul li a:hover {
    color:#fff;
    background-color:#333333;
}
#floatMenu p {
    color: #ffffff;
    text-align: left;
    margin-left: 40px;
    font-size: 18px;
}

修复说明 #

• 将所有事件绑定逻辑移到$(document).ready()中，确保只执行一次，避免重复绑定
• 点击<html>隐藏菜单时，通过closest()判断点击目标是否属于菜单，避免误触发
• 在菜单元素上添加stopPropagation()，阻止内部点击事件冒泡到<html>
• wSelect()简化为仅负责显示菜单，避免重复执行绑定逻辑

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