從響應調整到非響應時，我的響應式導航不會隱藏

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解決方案更好。