导航菜单从小屏切换到全屏后消失

Question

我创建了一个移动响应式菜单，我在其中替换了图标并显示/隐藏菜单。

首先主导航菜单运行良好，我调整屏幕大小并移至移动版本。 然后我点击了汉堡菜单，它工作正常。 当我再次增大窗口大小时，主导航菜单没有显示。 所以问题是，当我从 767 像素大小移动到全屏时，我的主导航菜单消失了。 我使用了离子图标，其中 ion-navicon-round 是汉堡菜单，ion-close-round 是大 x 图标。

这是用图像描述的情况。 第一：全屏

这是响应式菜单。

导航菜单消失。

这是我的导航菜单 HTML 代码。

<!-- HTML code -->
<ul class="main-nav js--main-nav">
    <li><a href="#features">Food delivery</a></li>
    <li><a href="#works">How it works</a></li>
    <li><a href="#cities">Our cities</a></li>
    <li><a href="#plans">Sign up</a></li>
 </ul>

<a class="mobile-nav-icon js--nav-icon"><i class="ion-navicon-round"></i></a>

这是我用来显示和隐藏响应式菜单的 Jquery 代码。

/* Mobile Navigation*/

$('.js--nav-icon').click(function() {

    var nav = $('.js-main-nav');
    var icon = $('.js--nav-icon i');
    nav.slideToggle(200);
    if(icon.hasClass('ion-navicon-round')){
        icon.addClass('ion-close-round');
        icon.removeClass('ion-navicon-round');
        $(".js--main-nav").slideDown();

    }
    else {
        icon.removeClass('ion-close-round');
        icon.addClass('ion-navicon-round');
        $(".js--main-nav").slideUp();
    }
});

var width = $(window).width();
$(window).resize(function(){
   if(width >= 768){
       $(".js--main-nav").slideDown();
   } 
});

Answer 1

您的 js 代码在我的测试环境中运行。检查在调整大小功能时添加一些自定义类，并通过检查元素查看 html。如果将您的自定义类添加到 html，那么您可能需要一些 css 修复。