javascript - 从响应式调整为非响应式时，我的响应式导航不会隐藏

Question

我是一个完全的网页设计初学者，但我遇到了一个问题:

我目前正在这个网站上工作:http://www.all4immo.de/

当我从正常模式转到响应模式并打开和关闭该菜单并再次返回正常模式时，菜单会再次打印在页面顶部。意思是:响应式菜单在没有所有 css 的情况下是可见的。我想要的是完全消失的响应式导航。这是我的点击功能的 jQuery 代码:

jQuery(document).ready(function () {
    jQuery("#btn").click(function () {
        jQuery("#navi2").slideToggle();
    });
    jQuery("#stln").click(function () {
        jQuery("#pmenue3").slideToggle();
    });
});

以及指向 navi css pastebin 的链接(pastebin.com/rhYzgQKc#)我已经查找了很多地方，但找不到解决问题的方法。

编辑:我重新表述了我的问题以更好地理解它添加了 pastebinlink。 :)

Answer 1

jQuery("#navi2").slideToggle(); 当它应该显示菜单时，它添加了一个内联样式(style 属性)显示: block; 所以，你需要像这样添加一个媒体查询:

@media screen and (min-width: 1001px){
   #navi2 {
      display:none !important;
   }
}

或者您可以使用 JavaScript 并检测 resize 事件并手动隐藏菜单。

就我个人而言，我更喜欢第一个，因为 css 解决方案总是比 javascript 解决方案更好。