javascript - jQuery on click slide toggle 在移动设备上工作，但在返回桌面时中断

Question

这是我的 html 和 jquery 代码。它在移动设备上运行良好，但当返回到桌面时会破坏导航栏。有任何想法吗？我正在使用 bulma.io

HTML

 <span class="nav-toggle">
     <span></span>
     <span></span>
  <span></span>
 </span>

  <!-- This "nav-menu" is hidden on mobile -->
  <!-- Add the modifier "is-active" to display it on mobile -->
  <div class="nav-right nav-menu">
    <a class="nav-item">
      Home
    </a>
    <a class="nav-item">
      Documentation
    </a>
    <a class="nav-item">
      Blog
    </a>

Javascript

$(document).ready(function(){
    $(".nav-toggle").click(function(){
        $(".nav-menu").slideToggle("slow");
    });
});

CSS

@media screen and (min-width: 769px), print {
   .nav-toggle {
    display: none;
  }
}

Answer 1

如果您在移动设备上使用滑动切换隐藏菜单，那么 jQuery 会在导航菜单上添加一个 display:none 内联。

一个快速而肮脏的修复方法是更改​​ CSS:

@media screen and (min-width: 769px), print {
   .nav-toggle {
    display: none;
  }
  .nav-menu { display:block !important; }
}

您还可以做一个更复杂的修复，这将在点击时更改导航菜单的类并为动画使用 css:

$(document).ready(function(){
    $(".nav-toggle").click(function(){
        var navMenu = $(".nav-menu");

        if(navMenu.hasClass('open')){
            navMenu.removeClass('open');
        } else {
            navMenu.addClass('open');
        }
    });
});

CSS

.nav-menu { max-height:0; opacity:0; transition:all .3s; }
.nav-memu.open { max-height:80em; opacity:1; }

@media(min-width:769px){
    .nav-menu { max-height:none; opacity:1; }
}

此方法的问题是您可能需要根据菜单的长度调整最大高度。

Here's a fiddle