css @media query + jQuery 按钮，当屏幕小于某个宽度时显示/隐藏 div + 当它变大时自动恢复答案

【问题标题】：css @media query + jQuery button to show/hide div when screen gets smaller than a certain width + automatically restore it back when it gets largercss @media query + jQuery 按钮，当屏幕小于某个宽度时显示/隐藏 div + 当它变大时自动恢复
【发布时间】：2014-06-05 00:42:41
【问题描述】：

这里有很多类似的问题，但没有一个能真正解决我的需要。

这是一个带有问题小教程的 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>

【问题讨论】：

标签： javascript jquery html css show-hide

【解决方案1】：

但是，在 Chrome 中仔细检查后，窗口大小功能似乎存在 +18px 偏移（css 媒体查询是像素精确的），因此由于某种原因，它在 500px 处触发为 518px。这不是一个大问题，但我想知道为什么？

【讨论】：

【解决方案2】：

嗯，早上比晚上聪明:)

答案是缺少实际显示/隐藏 div 的 jquery 代码，而我之前在这里找到的解决方案 Show and hide div with Window Size JavaScript? 由于某种原因无法正常工作，可能是因为我的错误实现，但也由于一个错误（应该是 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/

【讨论】：