我创建了一个移动响应式菜单,我在其中替换了图标并显示/隐藏菜单。
首先 主导航菜单运行良好,我调整了屏幕大小并移至移动版本。 然后 我点击了汉堡包菜单,效果很好。 当我再次放大窗口时,主导航菜单没有显示。 所以问题是,当我从 767 像素大小移动到全屏时,我的主导航菜单消失了。 我使用了 ionic 图标,其中 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();
}
});
最佳答案
您的 js 代码在我的测试环境中运行。检查在调整功能时添加一些自定义类,并通过检查元素查看 html。如果将您的自定义类添加到 html,那么您可能需要一些 css 修复。
关于jquery - 从小屏转到全屏后导航菜单消失,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50560746/