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

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();
    });
});

然后 link 到 navi css pastebin( pastebin.com/rhYzgQKc#) 我查了很多地方都找不到解决问题的方法。

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

Answer 1

您可以使用 css 中的@media 查询来实现此目的。

CSS Tricks - CSS Media Queries

Answer 2

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

错误：

Failed to load resource: the server responded with a status of 404 (Not Found) http://www.all4immo.de/fileadmin/templates/js/javascript_52.js

Failed to load resource: the server responded with a status of 404 (Not Found)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解决方案。

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

My responsive navigation doesn't hide when resizing from responsive to non-responsive

html

javascript

css

jquery

resize