Question

这是我的代码：

Jquery的：

$("#welcome-done").on("click", function(){
    $(".welcome-box").toggleClass("hide");
})

CSS：

.hide {
    display: none;
}

.welcome-box {
    padding-left: 0;
    background-color: white;
    border-radius: 12px;
    border-top: 6px solid;
    border-top-color: #0072FF;
    box-shadow: 0px 0px 300px 200px rgba(0,0,0,0.3);
    position: absolute;
    left: 50%;
    top: 170px;
    transform: translate(-50%);
    height: 500px;
    width: 50%;
    max-width: 700px;
    z-index: 700;
}

它适用于firefox，chrome，safari但由于某些原因它在IE11中无效...有谁知道如何解决这个问题？

编辑：

以下代码似乎在IE11中也不起作用（尽管在所有其他浏览器中都有效）

$("#welcome-done").on("click", function(){
    $(".welcome-box").toggle();
})

编辑2：

我在IE11中的控制台现在显示此错误（尽管此错误未出现在任何其他浏览器中）：

SCRIPT1003: Expected ':'
File: app.js, Line: 10397, Column: 10

Answer 1

如果您只是为了显示或隐藏al元素而实现此功能，则可以使用toggle方法，如下所示：

$("#welcome-done").on("click", function(){
    $(".welcome-box").toggle();
});

有关toggle方法here的更多信息。

Answer 2

这似乎是Internet Explorer和toggleClass中的一个错误，这是不幸的。

有一个黑客可以工作。例如，在CSS

中

#welcome-done{
    Padding-left: 0;
}

#welcome-done .hide{
    Display: none;
    Padding-left: 1px;
}

使用填充是强制重绘，这似乎解决了我过去的问题。

toggleClass（）在IE11中不起作用，但似乎适用于所有其他浏览器

2 个答案: