css @media查詢+ jQuery按鈕在屏幕小於特定寬度時顯示/隱藏div +在屏幕變大時自動將其還原

Question

這里有很多類似的問題，但是沒有一個能為我所需要的提供真正的解決方案。

這是帶有該問題的小教程的jsfiddle演示： http : //jsfiddle.net/V482z/2/ （或全屏結果http://jsfiddle.net/V482z/2/embedded/result/ ）

如以上教程中所述，我已經成功創建了jquery腳本，以便在屏幕較小但不是動態時顯示/隱藏側邊欄內容。 這是一種非常罕見的情況，普通用戶將以這種方式使用其瀏覽器的屏幕尺寸，但無論如何，我想解決這個難題。

如何使側邊欄div的jquery效果無效？

謝謝！

對於那些不喜歡jsfiddle並想將此示例復制到您計算機上的純html文件中的人，以下是完整的代碼：

 <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <title>jquery show/hide div test</title> <style> #showhide{ clear: both; float: left; display: none; height: 25px; cursor: pointer; background-color: #F00; } @media only screen and (max-width:499px) { #showhide{ display: block; } } #container { clear: both; display: block; width: 100%; } #sidebar { clear: both; float: left; display: block; width: 240px; height: 450px; background-color: #777; } @media only screen and (max-width:499px) { #sidebar { display: none; } } #content { display: block; width: 500px; height: 450px; background-color: #CCC; } </style> </head> <body> <div id="showhide"> show/hide sidebar </div> <div id="container"> <div id="sidebar">#1 automatically show/hide sidebar content when screen IS or GETS resized/smaller then 500px, but leave user the option to show hidden content on demand. <br/> <br/>tutorial: <br/>1. use the JSFIDDLE screen divider line to resize this content and observe the effect when it gets smaller than 500px <br/>2. now click on red show/hide sidebar block <br/>3. now click again to hide sidebar content <br/>4. now resize back the window screen to larger than 500px size. <br/>5. Where is the sidebar? Why is it not restored back? </div> <div id="content"> #2 content is always visible <br/> <br/> <b>THE ISSUE:</b> as you can see, when you toggle sidebar in less than 500px screen mode and resize the window back to original larger size, sidebar is still toggled/hidden due jquery effect. <br/> <br/> How to restore jquery hiding of the sidebar div? <br/> <br/> Thanks! </div> </div> <script type="text/javascript"> $(document).ready(function(){ $("#showhide").click(function () { $("#sidebar").fadeToggle("slow"); }); }); </script> </body> </html>

Answer 1

但是，在Chrome中仔細檢查后，窗口大小功能似乎存在+ 18px的偏移量（css媒體查詢精確到像素），因此，出於某種原因，它在500px時觸發為518px。 這不是主要問題，但我想知道為什么嗎？

Answer 2

好吧，早上比晚上聰明：)

答案是缺少要實際顯示/隱藏div的jquery代碼，而我之前在這里找到的解決方案是使用Window Size JavaScript顯示和隱藏div？ 由於某種原因而無法正常工作，可能是由於我的實現錯誤，還有一個錯誤（應該是function（）{而不是function { ）。

這是缺少的代碼：

$(window).resize(function() {
if( $(window).width() > 500 ) {
    $('#sidebar').show();
    $('#showhide').hide();
} else {

}

if( $(window).width() < 499 ) {
    $('#sidebar').hide();
    $('#showhide').show();
} else {

}
});

http://jsfiddle.net/V482z/3/

css @media查詢+ jQuery按鈕在屏幕小於特定寬度時顯示/隱藏div +在屏幕變大時自動將其還原

問題描述

2 個解決方案

解決方案1
1 已采納 2014-04-21 09:12:05

解決方案2
0 2014-04-21 08:51:07

css @media查詢+ jQuery按鈕在屏幕小於特定寬度時顯示/隱藏div +在屏幕變大時自動將其還原

問題描述

2 個解決方案

解決方案1 1 已采納 2014-04-21 09:12:05

解決方案2 0 2014-04-21 08:51:07

解決方案1
1 已采納 2014-04-21 09:12:05

解決方案2
0 2014-04-21 08:51:07