如何在移动设备上隐藏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>

但它不起作用。

在#inithidden上也尝试了visible-for-medium-up类，但没有任何运气。

有没有一种方法可以在不使用javascript的情况下实现这一点？

Answer 1

注意：你说你想在答案中使用jQuery，并且"不使用javascript"---但jQuery是一个JS库。

---

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

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

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

---

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

div#inithidden { display: none; }

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

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

---

EDIT2：看到您的第二条评论，您可以通过CSS的@media规则来完成，如下所示：

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