响应菜单在窗口大小调整时消失

Responsive menu disappearing on window resize

本文关键字：消失 调整 窗口大小 菜单 响应      更新时间：2023-09-26

我是一个脚本新手，但一直试图找到一个适合我的响应式菜单解决方案的解决方案。我看到其他人也有类似的问题，但他们似乎使用了不同的方法来制作他们的菜单。

下面是我的代码: HTML: 

function toggle_visibility(id) {
  var e = document.getElementById('menu-items');
  if ($(e).css('display') == 'block') {
    $(e).slideUp('fast');
  } else {
    $(e).slideDown('fast');
  }
};
.mobile-menu {
  display: none
}
@media only screen and (max-width: 680px) {
  #menu-items {
    display: none
  }
  .mobile-menu {
    display: block;
    cursor: pointer;
  }
}
<a onclick="toggle_visibility('menu-items');" class="mobile-menu">Menu</a>	
<div id="menu-items">
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#">Link</a>
</div>
<!--#menu-items-->

菜单工作得很好，但我遇到的主要问题是，当用户减小窗口大小以显示响应菜单切换按钮，然后使用切换按钮打开然后关闭菜单时，当窗口大小调整回桌面视图时，菜单永远不会返回到正常视图。

奇怪的是，如果用户在移动视图中打开响应式菜单并将大小调整回桌面视图，它会返回，但如果用户关闭菜单则不会返回。

我想在这个菜单上工作的唯一另一件事是，如果用户单击页面上的其他任何地方，但菜单，菜单关闭。目前，用户必须点击菜单切换链接来关闭它。

任何帮助都将非常感激!!

试试这个:

@media only screen and (min-width: 680px) {

 #menu-items {
    display: block
  }
  .mobile-menu {
    display: none;
    cursor: pointer;
  }
}

在这里使用slideUp()和slideDown()有点棘手，因为它们设置/删除内联样式'display: none;'，当您调整窗口大小时不会删除。这就是为什么菜单没有重新出现:隐藏菜单的内联样式仍然是活动的。

你需要做的是使用类来处理不同设备宽度的显示，并添加钩子到slideUp的完整回调:(JSFiddle)

CSS: 

.mobile-menu {
    display: none
}
@media only screen and (max-width: 680px) {
    #menu-items {
        display: none
    }
    .mobile-menu {
        display: block;
        cursor: pointer;
    }
    .collapsed {
        display: none;
    }
}
@media only screen and (min-width: 681px) {
    .collapsed {
        display:block;
    }
}

JS: 

function toggle_collapsed_class(e) {
    $(e).css('display', '').addClass('collapsed');
};
function toggle_visibility(id) {
    var e = document.getElementById('menu-items');
    if ($(e).css('display') == 'block') {
        $(e).slideUp('fast', function(){
            toggle_collapsed_class(e)
        });
    } else {
        $(e).removeClass('collapsed').slideDown('fast');
    }
};
相关文章：