Question

我是一个完整的网页设计初学者，我遇到了一个问题：

Iam目前正在使用此网站：http://www.all4immo.de/

当我从普通模式进入响应模式并打开和关闭该菜单并再次返回正常模式时，菜单将打印在页面顶部。意思是：没有所有的CSS，响应式菜单是可见的。我想要的是响应式导航完全消失。这是我点击功能的jQuerycode：

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 Tricks - CSS Media Queries

Answer 2

我注意到在chrome控制台中有没有正确调用的JavaScripts以及其他一些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解决方案总是优于代码解决方案。

从响应式响应到非响应式调整大小时，我的响应式导航无法隐藏

3 个答案: