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

Question

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

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

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

这是我的代码

$(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>

Answer 1

Hide the information by clicking Show/hide button then expend the screen you will find noting on screen, I want information be visible in this case

此行为是因为 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在调整窗口大小时查看效果。