Jquery hide() show() 不起作用 Internet Explorer 10答案

【问题标题】：Jquery hide() show() does not work internet explorer 10Jquery hide() show() 不起作用 Internet Explorer 10
【发布时间】：2015-10-10 18:05:47
【问题描述】：

我在 Internet Explorer 10 上遇到 jquery hide() 和 show() 的问题。我需要一个弹出窗口来显示我正在制作的横幅，单击左下角时会显示 div，当 div已启动，点击右上角的 div 会隐藏。

这适用于现代浏览器，但不适用于 Internet Explorer 10。

HTML

<div id="banner">
<button class="show"></button>
<div id="modal">
<button class="hide"></button>
</div>
</div>

CSS

#banner {
width: 468px;
height: 240px;
border: solid 1px black;
position: absolute;
overflow: hidden;
cursor: pointer; cursor: hand;
}

#modal {
width: 468px;
height: 240px;
display: none;   
position: absolute;
z-index: 9999;
background-color: red;
}

.show {
width: 80px;
height: 35px;
bottom: 0px;
position: absolute;
z-index: 12;
}

.hide {
right: 0px;
top: 0px;
width: 50px;
height: 50px;
position: absolute; 
z-index: 12;
}

jQuery

$(document).ready(function(){
$(".hide").click(function(){
    $("#modal").hide();
});
$(".show").click(function(){
    $("#modal").show();
});
});

编辑 - 问题已解决 看来您无法在 IE 10 及以下版本中单击空标签（仅指定宽度/高度），因此我必须用透明颜色（rgba 0,0,0,0.001）填充它。

我也意识到它可以在没有 jquery 的情况下完成，呵呵。

【问题讨论】：

Jquery fails to hide div in IE10 running in IE7 document and browser mode的可能重复
当您说它不起作用时，您的确切意思是什么？当你尝试它时会发生什么？您收到任何错误消息吗？
当我按下按钮时，模式不会在 IE 10 上显示，但它可以在其他浏览器上工作。
所以做一个答案并将其标记为解决方案。
请从您的标题和问题中删除“已解决”并将其添加为答案。如果您愿意，您甚至可以将其标记为“已接受”。

标签： javascript jquery html css internet-explorer

【解决方案1】：

您总是可以使用 vanilla JS，并执行以下操作：

document.getElementById('modal').style.display = 'block';

或

document.getElementById('modal').style.display = 'none';

这种方式也比通过 jQuery 对象更高效。

【讨论】：

应该，不然我会震惊的。
哈哈，如果没有，我会非常担心所有网页！

【解决方案2】：

Jquery 的 Hide 和 Show 方法将 CSS 属性显示切换为无/阻止应用的 HTML 标记。因此问题排除了兼容性。只需更正浏览器控制台 (F12) 上的错误（如果有）（我看到一个未引用的对象），然后重试。另外，检查您正在运行的浏览器模式。 (F12)。

【讨论】：

谢谢，当我可以访问 ie10 时肯定会这样做