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

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

您可以在 css 中使用 @media 查询来实现这一点。

CSS 技巧 - CSS 媒体查询

Answer 2

我注意到在 chrome 控制台中有一些 JavaScript 没有正确调用，还有一些其他的 css 文件。

错误：

加载资源失败：服务器响应状态为 404（未找到） http://www.all4immo.de/fileadmin/templates/js/javascript_52.js

加载资源失败：服务器响应状态为 404（未找到） http://www.all4immo.de/fileadmin/templates/css/style_52.css

加载资源失败：服务器响应状态为 404（未找到）

也许这就是网站意外运行的原因。 另外为了给你一个具体的答案并找出问题，你应该显示更多的代码。

我在您的网站上发现了另一个错误：

当您从正常模式转到响应模式并打开和关闭该菜单并再次返回正常模式时，菜单会再次打印在页面顶部。 你可能想解决这个问题。

Answer 3

jQuery("#navi2").slideToggle(); 当它应该显示菜单时，它会添加一个内联样式（ style属性） display:block; 因此，您需要添加这样的媒体查询：

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

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

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