javascript - 响应式下拉导航问题

Question

我正在为元素创建下拉导航。一旦设备宽度达到 768px，菜单就会隐藏起来，用户可以点击一个图标来查看链接。但是，一旦用户向上或向下滚动网页，导航就会突然消失。我怎样才能解决这个问题。我在下面提供了 jQuery 代码。

$(document).ready(function(){

 function checkNav() {
  if($(document).width() > 768) {
   $('#navigation ul').show();
  };
  if($(document).width() < 768) {
   $('#navigation ul').hide();
  };
 }
 checkNav();
 $(window).resize(function(){
  checkNav();
 });
 $('.mobile-menu').click(function(){
  $('#navigation ul').stop().slideToggle();
 });

});

谢谢!

Answer 1

你需要使用 css 来做到这一点

假设您的下拉菜单有 class="mobile-menu"然后将其添加到您的 css

.mobile-menu{
    position:absolute;
    left:0;
    top:0;
}

这将使您的菜单始终保持在左上角。

如果您使用 right:0; 而不是 left:0;，那么菜单将固定在右上角。