如何在移动设备上隐藏 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 class，但没有成功。

有没有办法不使用 javascript 来完成这个？

Answer 1

注意：你说你想要 jQuery 在你的答案中，并且 "without the use of javascript" --- 但是 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; }
}