始终在桌面上显示 div 并在移动屏幕上点击切换答案

【问题标题】：Always show div on desktop and toggle on-click on mobile screen始终在桌面上显示 div 并在移动屏幕上点击切换
【发布时间】：2018-02-13 23:52:28
【问题描述】：

我有两个 DIV，一个用作按钮并仅显示在移动屏幕上，另一个包含我希望在桌面上始终可见并且可以使用显示/隐藏按钮在移动设备上切换的信息。

在移动设备上，信息最初应该是隐藏的。问题是当我在 480 像素以下的屏幕上隐藏信息时，它在 480 像素以上的屏幕上不可见

通过单击“显示/隐藏”按钮隐藏信息，然后展开您会在屏幕上找到注释的屏幕，我希望在这种情况下可以看到信息。

这是我的代码

$(document).ready(function() {
  $('.show-hide').click(function() {
    $(this).next().toggle();
  });
});

.show-hide {
  background-color: #ffa2a2;
  padding: 8px;
  display: none;
}

.information {
  background-color: #a4dca4;
  padding: 8px;
}

@media only screen and (max-width: 480px) {
  .show-hide {
    display: inline-block;
  }
  .information {
    display: none;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="show-hide">Show/Hide Info</div>

<div class="information">
  Some information here, Some information here, Some information here, Some information here, Some information here, Some information here, Some information here,
</div>

【问题讨论】：

您的逻辑似乎在两种屏幕尺寸的变化中都能正常工作，即。绿色 div 在大屏幕上始终可见，在较小屏幕上隐藏，并通过按钮切换。你有什么问题？
通过单击显示/隐藏按钮隐藏信息，然后展开您会在屏幕上找到注释的屏幕，我希望在这种情况下可以看到信息。
啊，我明白你的问题了。我在下面为你添加了答案

标签： javascript jquery

【解决方案1】：

通过单击显示/隐藏按钮隐藏信息，然后展开您会在屏幕上找到注释的屏幕，我希望在这种情况下可以看到信息

这种行为是因为toggle()调用直接为元素添加了style属性，该属性难以用CSS覆盖，当媒体查询状态发生变化时需要这样做。

要解决此问题，请改用toggleClass()。然后，您可以在媒体查询之外忽略此类，以便始终显示该元素。

$(document).ready(function() {
  $('.show-hide').click(function() {
    $(this).next().toggleClass('toggle');
  });
});

.show-hide {
  background-color: #ffa2a2;
  padding: 8px;
  display: none;
}
.information {
  background-color: #a4dca4;
  padding: 8px;
}

@media only screen and (max-width: 480px) {
  .show-hide {
    display: inline-block;
  }
  .information {
    display: none;
  }
  .information.toggle {
    display: block;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="show-hide">Show/Hide Info</div>

<div class="information">
  Some information here, Some information here, Some information here, Some information here, Some information here, Some information here, Some information here,
</div>

您可以使用此example fiddle 来查看调整窗口大小时的效果。

【讨论】：

【解决方案2】：

$(document).ready(function() {
      $('.show-hide').click(function() {
        $(this).next().toggle();
      });
   
  

  $( window ).resize(function() {
    if( $( window ).width()>480){
      $('.information').toggle(true);
    }else{
      $('.information').toggle(false);
    }
    });
    });

.show-hide {
      background-color: #ffa2a2;
      padding: 8px;
      display: none;
    }

    .information {
      background-color: #a4dca4;
      padding: 8px;
    }

    @media only screen and (max-width: 480px) {
      .show-hide {
        display: inline-block;
      }
      .information {
        display: none;
      }
    }
    @media only screen and (min-width: 480px) {
      .show-hide {
        display: none;
      }
      .information {
        display: block;
      }
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="show-hide">Show/Hide Info</div>

    <div class="information">
      Some information here, Some information here, Some information here, Some information here, Some information here, Some information here, Some information here,
    </div>

【讨论】：