css - 隐藏导航后显示导航

Question

我有一些隐藏和显示我的导航的 CSS 和媒体查询：

所以默认情况下导航是：

nav {
  display: inline;
}

然后使用媒体查询我隐藏它：

@media only screen and (min-width: 480px) and (max-width: 767px) {
  nav {
    display: none;
  }
}

一切运行良好，然后我将一些 JavaScript 连接到一个按钮，以便在媒体查询生效时显示和隐藏导航。

但是，当我将浏览器大小调整回全屏时，大于 767 像素的导航不会重新出现。如何让导航显示给桌面用户？

Answer 1

像这样将jquery调整大小处理程序绑定到窗口

$(window).resize(function(e){
    if($(window).width() > 767){
        $('nav').show()
    } else {
        $('nav').hide()
    }
})

您可以对缓存对象进行一些优化，但这应该让您希望您需要开始

Answer 2

@media all and (min-width: 768px) {
    nav
    {
        display: inline!important;
    }
}

Kai Qing 的回答帮助我意识到我只需要覆盖 jQuery .toggle 事件正在添加的内联 CSS - 当然是在正确的媒体查询中。

Answer 3

您可以让 js 向导航添加一个类并使用 !important 覆盖媒体查询语句...

nav {
  display: inline;
}
.force_display{
    display:inline !important;
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
  nav {
    display: none;
  }
}

只需在 js 函数中添加 force_display 类（假设您使用的是 jquery）...

$('#button').on('click', function(){
    $('nav').toggleClass('force_display');
});