Javascript 简单单击show（）什么也不做

我可能会在这里失去理智：

<span class="showMap" style="cursor:pointer;">(Show map)</span>

<div class="col-md-12">
    <div id="map" style="height:300px; display:none;"></div>
</div>

但它什么也没做。没有错误，控制台中没有任何内容

隐藏的DIV包含一个谷歌地图，不确定这是否有什么区别，但我想我会提到它。

试试这个

为我工作：

把东西放进抽屉里，你就会看到它打开了

<div class="col-md-12">
    <div id="map" style="height:300px;display:none;background-color:green">hello</div>
</div>

你好

---

它看起来什么都没有，因为背景是白色的，DIV中什么都没有（同样，如上所述，谷歌地图不喜欢不显示）。因此，您的代码正在工作，只是没有显示任何内容。

谷歌地图不喜欢在加载时隐藏它。想想jquery的

height（）

函数——当元素被隐藏时，它将返回错误的值

我不确定这是否有效，但使用CSS可以将您的

映射为
位置：绝对；左：-9999em以使其显示在屏幕外。这可能会允许谷歌地图正确加载。在单击功能上，您将希望
隐藏（）
映射元素，将css更改为
位置：相对；左：0show（）
it

jQuery(function($){
  var map = $('#map');
  map.css({position:'absolute',left:'-9999em'});
  $('.showMore').click(function(){
    map.hide().css({position:'relative',left:'0em'}).show();
  });
});

您是否将代码包装在
$（document）.ready（function（）{}）中？该地图下方的元素可能需要更长的时间才能加载。是否有任何样式应用于
#map
，如
可见性：hidden
或其他会阻止其显示的样式。在某些浏览器中，以这种方式显示谷歌地图存在已知问题。使用inspector确定div是否实际显示，但映射是否显示。如果使用开发人员工具检查代码，那么您是否看到
#map
的CSS发生了任何更改？@KevinBowersox是的，它的包装不必为此偏离标准jQuery。Hide（）已经处理了显示状态。我并不是说你的代码不工作。我的意思是，这不是对所提出问题的解决办法。@isherwood想解释一下吗？要解释什么？您只是将show（）替换为css（），这对显示Google地图没有任何作用。@isherwood如果我错了，请告诉我，如果您检查了jsFiddle链接，我看到vishal和richard都在做同样的事情隐藏和显示Div。如果我错了，请纠正我。谢谢-如果我添加了一个单词而不是地图是的，当然设置高度就足够了？你能做一把小提琴或修改我的来演示吗？@DarrenSweeney你不需要添加任何单词。不添加任何单词或空格，您就可以实现该功能。@VishalPatel基于代码，前提是不会出现任何内容，您会对此提出质疑吗？@Snowburn为什么这么说？多个选择器的工作方式与您编码的方式不同，以前从未见过这样的情况。。。当我把它改为：map.css（'position'，'absolute'）.css（'left'，'-9999em'）；&&map.hide（）.css（'position'，'relative'）.css（'left'，'0em'）.show（）；它工作得很好。非常感谢！对不起，我把语法弄错了。css函数可以获取多个
键：'value'
对的对象，允许您在一个命令中更改多个css属性，而不是多个
.css（）
调用。我做错的是把钥匙也用引号括起来。我已经更新了我的答案。
<div class="col-md-12">
    <div id="map" style="height:300px;display:none;background-color:green">hello</div>
</div>

jQuery(function($){
  var map = $('#map');
  map.css({position:'absolute',left:'-9999em'});
  $('.showMore').click(function(){
    map.hide().css({position:'relative',left:'0em'}).show();
  });
});