在滚动时改变导航条上的图标

Question

导航栏中有两个徽标和一个汉堡包图标(用于显示菜单)。当用户向下滚动时，导航条应该改变背景颜色，徽标和汉堡包应该改变颜色(从白色变为深色)。我已经做到了。但是当你打开并关闭菜单时，汉堡包图标就会消失。我尝试了很多方法(包括向滚动上的汉堡包按钮添加类)，但都不起作用。我不知道，如何瞄准"关闭"。按钮时，导航条处于滚动状态，因此新版汉堡按钮出现

$(function(){
function e(){$(window).scrollTop()>0?(
$("nav.nav").addClass("scrolled"),
$(".content-nav").fadeIn(200)):(
$("nav.nav").removeClass("scrolled"),
$(".content-nav").fadeOut(200))
};
});
$(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();
});
});

.landing-page-nav-container {
background-color: #29428A;
}
.scrolled .landing-page-nav-container {
background-color: #FFFFFF;
}
.logo-dark, .hamburger-dark {
display: none;
}
.scrolled .logo-dark, .scrolled .hamburger-dark {
display: initial;
}
.scrolled .logo-white, .scrolled .hamburger-white {
display: none;
}

<nav class="nav navbar-fixed-top collapsed">
<div class="landing-page-nav-container">
<a href="<?php the_field('link_logo')?>">
<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>
<a href="#<?php the_field('about_link')?>"><li><?php the_field('about_napis')?></li></a>
<a href="#<?php the_field('program_link')?>"><li><?php the_field('program_napis')?></li></a>
<a href="#<?php the_field('registration_link')?>"><li><?php the_field('registration_napis')?></li></a>
<a href="#<?php the_field('report_link')?>"><li><?php the_field('report_napis')?></li></a>
<a href="#<?php the_field('lttalks_link')?>"><li><?php the_field('lttalks_napis')?></li></a>
<a href="#<?php the_field('events_link')?>"><li><?php the_field('events_napis')?></li></a>
</ul>
</div>  
</div>
</nav>
<script type = "text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

Answer 1

问题是在。汉堡包上应用。show()，在点击。cross之后(这扰乱了正确执行CSS)。

jQuery代码:

$(function(){
function e(){$(window).scrollTop()>0?(
$("nav.nav").addClass("scrolled"),
$(".content-nav").fadeIn(200)):(
$("nav.nav").removeClass("scrolled"),
$(".content-nav").fadeOut(200))
};
});
$(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-dark").removeAttr("style");
$(".hamburger-white").removeAttr("style");
});
}); 
$( ".menu li" ).click(function() {
$( ".menu" ).toggle();
$(".cross").hide();
$(".hamburger-dark").removeAttr("style");
$(".hamburger-white").removeAttr("style");
});
});