开启/关闭后解决方案消失响应导航

我以前问过这个问题，但还是不成功。希望有人现在可以帮助我......在小提琴中，您会看到一个响应式菜单，当菜单项大于1000像素时，它有4个水平内嵌的菜单项。小于1000px的菜单显示一个nav-btn（现在是一个RED盒子！），onclick显示菜单项目，但是当打开和关闭并调整大于1000像素时，其余3个菜单项目不显示。我做了一些媒体查询测试，但我认为解决方案必须在javascript部分中找到。任何人都可以应对这一挑战开启/关闭后解决方案消失响应导航

这里FIDDLE

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

来源

2015-02-08 KP83

你可能要像我一样在这里@FIDDLE

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

来源

2015-02-08 14:09:17 NMindz

谢谢，但我这样做，它不会做任何事情之前，我把我气得火冒三丈... – KP83 2015-02-08 14:20:03

使用这样的[响应资产净值（HTTP ：//codepen.io/TimRuby/pen/kLGic） – NMindz 2015-02-08 14:22:04

谢谢，但我必须重建一切。它必须简单地通过JavaScript来实现，例如：'$（window）.resize（function（）{if（w> 1000 && nav.is（'：block'））{nav.removeAttr（'style'）; } }）;'但是我不是一个javascript主... – KP83 2015-02-08 14:27:30

好添加新的媒体查询，问题是，你的fadeToggle设置您nav > ul到style="display: none"。样式设置直接覆盖任何样式表，除非您使用！important。

因此，与NMindz答案相结合，试试这个：

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

你也可以尝试纯CSS的解决方案，可能会更好。喜欢的东西

nav ul.show { 
    display: block; 
}

而对于JavaScript的

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

来源

2015-02-08 14:26:42 Dellkan

感谢这两个工作，但你如何得到一个fadeToggleClass与JavaScript版本的300转换？哪种解决方案是您认为最好的解决方案？ – KP83 2015-02-08 14:35:46

好吧，我倾向于将所有更改放入css类中，然后通过javascript在css类之间切换各种状态。当使用jQuery动画时，事物会放入'style =“”'中，这可能无法像使用基于CSS的媒体一样工作。由于css转换不适用于显示，所以转换稍微困难一些。但是，您可以改为不透明。 – Dellkan 2015-02-08 14:39:18

好，所以不是媒体查询，你知道如何添加一个fadeToggleClass它是否存在，因为它不会工作。 – KP83 2015-02-08 14:42:36

开启/关闭后解决方案消失响应导航

回答

相关问题