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>

Javasciprt

$(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 inline。

快速而肮脏的修复将是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

Answer 2

在调整大小时重置您的脚本，这将解决您的问题

$(window).resize(function() {
    $(".nav-menu").removeAttr("style");
});

单击幻灯片切换上的jQuery在移动设备中工作，但在返回桌面时中断

2 个答案: