打开/关闭后解决方案消失响应式导航 [英] Solution disappearance responsive navigation after open/close

问题描述

我之前曾问过这个问题，但还是没有成功.希望有人现在能帮助我...在小提琴中，您看到一个响应式菜单，当它大于1000px时，该菜单具有4个水平内联的菜单项.小于1000像素的菜单会显示一个nav-btn(现在是红色框！)，onclick会显示菜单项，但是当打开和关闭并调整大小至大于1000像素时，其余3个菜单项不会显示.我对媒体查询做了一些测试，但是我认为解决方案必须在javascript部分中找到.任何人都可以应对这一挑战?

I asked this before, but still not successful. Hope someone can help me now... In the fiddle you see a responsive menu that has 4 menu-items horizontal inline when it is larger than 1000px. Smaller than 1000px the menu shows a nav-btn (now a RED box!) that onclick shows the menu-items, but when open and close and resize to larger than 1000px the rest of the 3 menu-items don't show up. I did some tests with media queries but i think the solution must be find in the javascript part. Anyone can handle this challenge?

在 FIDDLE

$(function() {
$('.nav-btn').click(function(event) {
$('nav ul').fadeToggle(300);
});
});

推荐答案

好，问题是您的fadeToggle将nav > ul设置为style="display: none".样式集直接覆盖所有样式表，除非您使用！important.

Well, the problem is that your fadeToggle sets your nav > ul to style="display: none". Styles set directly overrides any stylesheets, unless you use !important.

如此，并结合NMindz答案，请尝试以下操作:

As such, and combining with NMindz answer, try this:

@media all and (min-width: 1000px) {
  nav ul { 
    display: block !important;
    top: 60px;
  }
}

您也可以尝试使用纯CSS解决方案，它可能会更好.像

You could also try a pure css solution that would probably be better. Something like

nav ul.show {
    display: block;
}

对于javascript

And for the javascript

$(function() {
    $('.nav-btn').click(function(event) {
        $('nav ul').toggleClass("show");
    });
});

这篇关于打开/关闭后解决方案消失响应式导航的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！