如何在移动设备上隐藏 div 但使用 jQuery 使其可见 [英] How to hide a div on mobile but make it visible with jQuery

问题描述

我有一个使用 ZURB Foundation 5 和 jQuery 的项目.

仅针对移动用户，我有一种情况，我希望在页面加载时隐藏

，但当用户单击某个元素时它应该可见.请注意，指定的元素必须对非移动用户可见.

尝试过

隐藏div的内容

和

<a href="#/" onclick="$('#inithidden').toggle(); return false;">点击显示隐藏的div</a>

但它不起作用.

还尝试了 #inithidden 上的 visible-for-medium-up 类，但没有任何运气.

有没有不使用 javascript 的方法来实现这一点?

解决方案

注意:您说您希望在答案中使用 jQuery，并且不使用 javascript"——但 jQuery 是一个 JS 库.

---

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

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

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

---

EDIT 看看你的评论，如果你只是问如何将它设置为默认隐藏，你可以添加样式:

div#inithidden { 显示:无；}

到您的 CSS，或者您可以将 style 属性添加到您的

中，如下所示:

隐藏div的内容

---

EDIT 2:看到你的第二条评论，你可以通过 CSS 的 @media 规则来做到这一点，就像这样:

@media screen and (max-width: 750px) {div#inithidden { 显示:无；}}

I have a project with ZURB Foundation 5 and jQuery.

Just for mobile users, I have a situation, where I want a <div> to be hidden on the page load, but it should become visible when the user clicks on an element. Note that the specified element must be visible for non mobile users.

Tried

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

and

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

but it does not work.

Tried also the visible-for-medium-up class on the #inithidden without any luck.

Is there a way to accomplish this without the use of javascript?

解决方案

Note: You say you want jQuery in your answer, and "without the use of javascript" --- but jQuery is a JS library.

---

If #inithidden is hidden display:none on page load, then you can change the onclick in the second line of code to:

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

What your code is doing is simply creating a jQuery object for $("#inithidden"), but not doing anything with it. Use show() to change display to block.

---

EDIT Looking at your comment, if you are just asking how to set it to hidden by default, you can either add the style:

div#inithidden { display: none; }

to your CSS, or you can add the style attribute to your <div> like so:

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

---

EDIT 2: Seeing your second comment, you can do this through CSS's @media rule, like so:

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

这篇关于如何在移动设备上隐藏 div 但使用 jQuery 使其可见的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！