Javascript 带有窗口大小重置的控制按钮切换

我有以下代码，可以在打开和“关闭”（其中“打开”类被删除）之间切换按钮状态（#导航图标），使用引导导航。以及在导航div处于打开（openNav）或关闭（closeNav）状态时应用于导航div的样式

js

html

此外，当窗口调整大小时，它似乎可以工作，但单击按钮没有任何效果，然后状态就会变得无序（打开时按钮指示关闭，反之亦然）

编辑：基本上希望将按钮单击添加到打开/关闭导航代码中，删除切换，但保留单击事件

---

*如果可能的话，也可以接受清理/合并代码的建议

根据这一点和您提供的代码，它的行为符合您的意愿。唯一的区别是我删除了

onclick

，并将该函数添加到

click

handler。同时发布相关的html代码。我不确定小提琴是否显示了我的问题。“我的”按钮将类添加到这些导航元素中。但是一旦你调整了窗口的大小，第一次点击似乎除了改变按钮状态（删除“打开”类）之外什么都做不了，但似乎没有添加其他类。但是它在第二次点击时就打开了，但是打开状态是关闭的，导航是打开的，根据相关的html，按钮就是它。导航位于窗口的顶部。边距和高度css使其“打开”和“关闭”

$(document).ready(function(){
 $('#nav-icon').click(function(){
    $(this).toggleClass('open');
 });
});

let opened = false; // set the nav as closed by default
function toggleNav() {
  if(!opened) { // if opened is false (ie nav is closed), open the nav
   openNav()
  } else { // else, if opened is true (ie nav is open), close the nav
   closeNav();
  }
 opened = !opened;
 }

function openNav() {
  $('#navWrap').addClass('openHeight').removeClass('closeHeight');
  $('#main').addClass('openMargin').removeClass('closeMargin');
}

function closeNav() {
  $('#navWrap').removeClass('openHeight').addClass('closeHeight');
  $('#main').removeClass('openMargin').addClass('closeMargin');
}

<button id="nav-icon" class="navbar-toggler" type="button" onclick="toggleNav()"> ... </button>

$(window).on('resize', function(){
$('#nav-icon').removeClass('open');
$('#navWrap').removeClass('openHeight').addClass('closeHeight');
$('#main').removeClass('openMargin').addClass('closeMargin');
});