从小屏幕移动到全屏幕后，导航菜单消失

Question

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

首先主导航菜单运行正常，我调整屏幕大小并移至移动版本。 然后我点击了汉堡包菜单，效果很好。 当我再次使窗口大小变大时，主导航菜单不会显示。 所以问题是，当我从767px大小移动到全屏时，我的主导航菜单消失了。 我使用了离子图标，其中 ion-navicon-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代码正在我的测试环境中运行。检查在调整大小功能时添加一些自定义类，并通过inspect元素查看html。如果将自定义类添加到html，则可能需要一些css修复。