如何用jQuery实现CSS动画游戏中按钮的顺序解锁功能

问题根源 #

你之前加.disabled类导致所有按钮失效，大概率是用了全局事件阻止（比如$('.disabled').click(function(e){e.stopPropagation()})），或者把禁用逻辑写死了，没区分已解锁和未解锁的按钮状态。下面是直接可用的分步解决方法：

1. 基础HTML结构调整 #

给初始未解锁的菜单按钮默认加上.disabled类，确保页面加载时只有第一个菜单按钮可点击：

<!-- 主菜单 -->
<div class="main-menu">
  <button id="menu1-button">进入学习页面</button>
  <button id="menu2-button" class="disabled">进入选择题页面</button>
  <button id="menu3-button" class="disabled">进入最终关卡</button>
</div>

<!-- 学习页面 -->
<div id="page-study" class="page">
  <!-- 页面内容 -->
  <button id="p1-button">完成学习，返回菜单</button>
</div>

<!-- 选择题页面 -->
<div id="page-multiple-choice" class="page">
  <!-- 页面内容 -->
  <button id="p2-button">完成答题，返回菜单</button>
</div>

2. CSS禁用样式 #

用视觉反馈+交互阻断实现禁用效果，避免用事件阻止导致的全局失效：

.disabled {
  pointer-events: none; /* 直接阻断点击交互 */
  opacity: 0.5; /* 视觉上区分禁用状态 */
  cursor: not-allowed; /* 鼠标样式提示 */
}
.page {
  display: none; /* 默认隐藏子页面 */
}

3. jQuery逻辑实现 #

核心是通过点击页面完成按钮，移除对应菜单按钮的.disabled类，解锁交互：

$(function() {
  // 主菜单按钮跳转逻辑
  $('#menu1-button').click(function() {
    $('#page-study').show();
    $('.main-menu').hide();
  });

  $('#menu2-button').click(function() {
    $('#page-multiple-choice').show();
    $('.main-menu').hide();
  });

  $('#menu3-button').click(function() {
    // 第三关逻辑
  });

  // 学习页面完成按钮：解锁menu2-button
  $('#p1-button').click(function() {
    $('#page-study').hide();
    $('.main-menu').show();
    $('#menu2-button').removeClass('disabled'); // 移除禁用类
  });

  // 选择题页面完成按钮：解锁menu3-button
  $('#p2-button').click(function() {
    $('#page-multiple-choice').hide();
    $('.main-menu').show();
    $('#menu3-button').removeClass('disabled'); // 移除禁用类
  });
});

关键注意点 #

• 不要用全局的.disabled点击事件阻止，pointer-events: none已经能阻断未解锁按钮的点击，不会影响其他按钮。
• 如果需要兼容旧浏览器（比如IE10及以下），可以把pointer-events: none换成在按钮点击事件里判断是否有.disabled类：

  $('.main-menu button').click(function() {
    if ($(this).hasClass('disabled')) return;
    // 后续跳转逻辑
  });
  

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