前端教程：优化滚动导航栏中汉堡菜单图标的动态显示

<nav class="nav navbar-fixed-top collapsed">
  <div class="landing-page-nav-container">
    <!-- 白色和深色Logo，根据滚动状态切换 -->
    <a href="#">
      <img class="img-responsive img-nav img-logo-centrum logo-white" src="https://placekitten.com/50/50">
      <img class="img-responsive img-nav img-logo-centrum logo-dark" src="https://placekitten.com/49/50">
    </a>
    <img class="img-responsive img-nav img-logo-forum logo-white" src="https://placekitten.com/49/49"> 
    <img class="img-responsive img-nav img-logo-forum logo-dark" src="https://placekitten.com/50/49">      

    <!-- 白色和深色汉堡图标，根据滚动状态切换 -->
    <button class="hamburger hamburger-white">
      <img class="img-responsive img-nav hamburger-icon" src="https://via.placeholder.com/50x50/000000/FFFFFF">
    </button>
    <button class="hamburger hamburger-dark">
      <img class="img-responsive img-nav hamburger-icon" src="https://via.placeholder.com/50x50">
    </button>

    <!-- 关闭菜单的叉号图标，初始隐藏 -->
    <button class="cross" style="display: none">
      <img class="img-responsive img-nav hamburger-icon cross-icon" src="https://via.placeholder.com/50x50?text=cross">
    </button> 

    <!-- 移动菜单内容 -->
    <div class="menu" style="display: none">
      <ul>
        <li>菜单项1</li>
        <li>菜单项2</li>
        <!-- 更多菜单项 -->
      </ul>
    </div>  
  </div>
</nav>

<script type = "text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

.landing-page-nav-container {
  background-color: #29428A; /* 默认背景 */
}
.scrolled .landing-page-nav-container {
  background-color: #FFFFFF; /* 滚动后背景 */
}

/* 默认状态下，深色Logo和汉堡图标隐藏 */
.logo-dark, .hamburger-dark {
  display: none;
}
/* 滚动状态下，深色Logo和汉堡图标显示 */
.scrolled .logo-dark, .scrolled .hamburger-dark {
  display: initial;
}
/* 滚动状态下，白色Logo和汉堡图标隐藏 */
.scrolled .logo-white, .scrolled .hamburger-white {
  display: none;
}

// 滚动事件处理
$(window).on('scroll', function() {
    if ($(window).scrollTop() > 0) {
        $("nav.nav").addClass("scrolled");
        $(".content-nav").fadeIn(200); // 假设存在 .content-nav
    } else {
        $("nav.nav").removeClass("scrolled");
        $(".content-nav").fadeOut(200); // 假设存在 .content-nav
    }
});

$(document).ready(function() {
  $(".cross").hide(); // 初始隐藏叉号图标
  $(".menu").hide(); // 初始隐藏菜单

  // 点击汉堡图标打开菜单
  $(".hamburger").click(function() {
    $(".menu").slideToggle( "slow", function() {
      $(".hamburger").hide(); // 隐藏所有汉堡图标
      $(".cross").show();     // 显示叉号图标
    });
  });

  // 点击叉号图标关闭菜单 (存在问题)
  $(".cross").click(function() {
    $(".menu").slideToggle( "slow", function() {
      $(".cross").hide();
      $(".hamburger-white").show(); // 尝试显示白色汉堡图标，这里是问题所在
    });
  }); 

  // 点击菜单项关闭菜单 (存在问题)
  $( ".menu li" ).click(function() {
    $( ".menu" ).toggle();
    $(".cross").hide();
    $(".hamburger").show(); // 尝试显示汉堡图标，这里是问题所在
  });
});

// 滚动事件处理
$(window).on('scroll', function() {
    if ($(window).scrollTop() > 0) {
        $("nav.nav").addClass("scrolled");
        $(".content-nav").fadeIn(200); // 假设存在 .content-nav
    } else {
        $("nav.nav").removeClass("scrolled");
        $(".content-nav").fadeOut(200); // 假设存在 .content-nav
    }
}).trigger('scroll'); // 页面加载时立即触发一次，确保初始状态正确

$(document).ready(function() {
  $(".cross").hide(); // 初始隐藏叉号图标
  $(".menu").hide(); // 初始隐藏菜单

  // 点击汉堡图标打开菜单
  $(".hamburger").click(function() {
    $(".menu").slideToggle( "slow", function() {
      $(".hamburger").hide(); // 隐藏所有汉堡图标
      $(".cross").show();     // 显示叉号图标
    });
  });

  // 点击叉号图标关闭菜单 (修复后)
  $(".cross").click(function() {
    $(".menu").slideToggle( "slow", function() {
      $(".cross").hide(); // 隐藏叉号图标
      // 关键修复：移除汉堡图标的内联样式，让CSS规则生效
      $(".hamburger-dark").removeAttr("style");
      $(".hamburger-white").removeAttr("style");
    });
  }); 

  // 点击菜单项关闭菜单 (修复后)
  $( ".menu li" ).click(function() {
    $( ".menu" ).toggle(); // 切换菜单显示状态
    $(".cross").hide();  // 隐藏叉号图标
    // 关键修复：移除汉堡图标的内联样式
    $(".hamburger-dark").removeAttr("style");
    $(".hamburger-white").removeAttr("style");
  });
});

$(".hamburger-dark").removeAttr("style");
$(".hamburger-white").removeAttr("style");