jQuery如何显示一个隐藏的div

Question

我在页面中嵌入了谷歌地图，但其可见性被设置为隐藏。我希望使用一个按钮来显示该地图。应该使用 jQuery 实现。

我的代码 - （不起作用）

<div id="map" style="height: 350px; border: 1px solid #979797;visibility="hidden";></div>

有人可以帮我处理相关的 jQuery 代码吗？

- Parvesh

---

你有没有试过在 jQuery 网站 上查找？ - Gareth

看起来你有错误的样式打字语法。应该是 <div id="map" style="height: 350px; border: 1px solid #979797;visibility:hidden"></div>。 - bitoshi.n

Answer 1

试试

$('#map').css('visibility','visible');

实际上，如果样式具有display:none，您可以使用jQuery函数

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

- bitoshi.n

---

我有一个按钮 <input type="submit" value="submit" id="show"/>这是我的jQuery代码：$(document).ready(function(){$('#show').click(function(){ $('#map').show(); });});它不起作用，你能帮我吗？ - Parvesh

@devilived 如果你的样式使用了'visibility'，那么它必须是$('#map').css('visibility','visible');。因为$('#map').show();只适用于样式为display:none的情况。 - bitoshi.n

@devilived，你的jQuery函数必须像这样才能看到它的工作原理。$(document).ready(function(){ $('#show').click(function(){ $('#map').css('visibility','visible');return false; }); }); - bitoshi.n

每次我尝试做这个的时候，我都不得不查找答案...来回反复。对于“为什么”的+1，因为这确实有助于知道在哪种情况下使用哪种方法。 - Anthony Griggs

Answer 2

你的 style="" 标签也不正确。应该这样写：visibility: hidden;

试试这个：

<div id="map" style="height: 350px; border: 1px solid #979797; display: none";></div>

$("#map").show();

- Adam Levitt

Answer 3

但是如果你想使用jQuery来隐藏它，visibility:hidden比display:none更好。因为jQuery的.show()函数会覆盖一些页面元素，如锚点标签，从而阻止点击事件。

- godwinwaswa

Answer 4

这是一个 jsfiddle 示例：http://jsfiddle.net/lucuma/GhMbU/ $('div#map').css('visibility', 'visible')

- lucuma