Question

<input type="button" value="button">    
<nav>
      <ul>
        <li><a href="#">abcd</a></li>
        <li><a href="#">abcd</a></li>
        <li><a href="#">abcd</a></li>
        <li><a href="#">abcd</a></li>
      </ul>
    </nav>

以上是我的菜单的html。我在移动模式下单击我的按钮时将其显示为下拉菜单。

现在我显示的菜单与水平菜单相同，floating左侧为li;但此菜单应始终显示在桌面模式下。并且应默认隐藏在移动模式中。

为实现这一点，我使用了以下代码

$(window).on('resize',function(){
  if($(window).width() > 992){
    $('nav').show();
  }else{
     $('nav').hide();
   }
});


$('input[type="button"]').on('click',function(){
   $('nav').slideToggle();
});

现在，如果我在移动设备中打开菜单并更改方向，则会触发调整大小事件并且菜单消失，这不应该发生。我该怎么做才能避免这种情况！？！

Answer 1

哦，我在桌面模式nav{display:block !important;}中得到了这个nav{display:none;}并删除了调整大小功能。

从我的代码中删除了以下代码。这很有效。

$(window).on('resize',function(){
  if($(window).width() > 992){
    $('nav').show();
  }else{
     $('nav').hide();
   }
});

调整大小时触发事件，但不更改方向

1 个答案: