如何在移动设备上隐藏div，但使用jQuery

Question

我有一个包含ZURB Foundation 5和jQuery的项目。

仅针对移动用户，我有一种情况，我希望在页面加载时隐藏<div>，但是当用户点击元素时它应该变为可见。请注意，非移动用户必须可以看到指定的元素。

尝试

<div id="inithidden" class="show-for-medium-up">contents of the hidden div</div>

和

<a href="#/" onclick="$('#inithidden').toggle(); return false;">Click to show the hidden div</a>

但它不起作用。

在visible-for-medium-up上试了#inithidden课，没有任何运气。

有没有办法在不使用javascript的情况下完成此操作？

Answer 1

注意：你说你的答案中需要jQuery，而且不需要使用javascript＆＃34; ---但是jQuery是一个JS库。

如果页面加载时#inithidden隐藏display:none，那么您可以将第二行代码中的onclick更改为：

$('#inithidden').show();

您的代码正在做的只是为$("#inithidden")创建一个jQuery对象，但没有对它做任何事情。使用show()将display更改为block。

编辑查看您的评论，如果您只是询问如何将其设置为默认隐藏，则可以添加样式：

div#inithidden { display: none; }

到您的CSS，或者您可以style添加<div>属性，如下所示：

<div style="display: none;" id="inithidden" class="show-for-medium-up">contents of the hidden div</div>

编辑2 ：看到您的第二条评论，您可以通过CSS @media规则执行此操作，如下所示：

@media screen and (max-width: 750px) {
    div#inithidden { display: none; }
}