javascript - Div 转换 - IE 与其他

Question

我有一个 JSFiddle，它显示一系列框。如果单击其中一个框，它会展开以覆盖其他框，然后显示文本。单击现在展开的框时，它会缩回到原来的宽度和高度。该 JavaScript 在 Firefox、Chrome 和 Safari 中完美运行。但是，在 Internet Explorer (v10) 中，该框会展开但无法缩回。关于为什么会这样的任何见解吗？

JSFiddle:http://jsfiddle.net/QBdDE/

Javascript:

$('div').on('click', function (e) { 
    if ($(this).hasClass('clicked')) {
        setTimeout(function (div) {
            return function () { div.css('z-index', '') ; } ;            
        } ($(this)), 1000) ;
       $('.overlay-text').hide();
    }
    else {
        $(this).css('z-index', 400) ;
        setTimeout(function(){$('.overlay-text').show();},1000);
    }
    $(this).toggleClass('clicked') ;

});

Answer 1

发生了什么

问题:

IE11 中添加了

pointer-events 支持。 IE10 忽略了这一点，因为您的覆盖层位于顶部，所以鼠标正在与其交互。不过我们可以解决这个问题!

解决方案:

我们需要删除对该 CSS 规则的依赖。为此，我们需要做两件事:

1.) 即使 :hover 效果没有发生，我们也需要保持悬停颜色。我们可以向 CSS 添加另一个选择器，以便 .clicked 类将导致颜色。

2.) 我们需要解决点击 .overlay_text 时发生的情况，并使用它来触发收缩动画。

---

代码

1.) 悬停效果

我们需要在每个使用 :hover 的地方添加另一个选择:

旧 CSS:

.first_box:hover {

   ...background color rule ...

}

新 CSS:

.first_box:hover, .first_box.clicked {

   ...background color rule ...

}

为所有 4 个框规则重复上述内容。

2.) .overlay-text 触发器

我们需要点击 .overlay-text 来触发缩小。

旧JS:

$('div').on('click', function (e) { 
    if ($(this).hasClass('clicked')) {
        setTimeout(function (div) {
            return function () { div.css('z-index', '') ; } ;            
        } ($(this)), 1000) ;
       $('.overlay-text').hide();
    }
    else {
        $(this).css('z-index', 400) ;
        setTimeout(function(){$('.overlay-text').show();},1000);
    }
    $(this).toggleClass('clicked') ;

});

新的JS:

我们必须向 .on() 代码添加一个新的选择器，然后我们必须向两个选定的方 block 添加 .clicked，添加覆盖部分。最后我们必须从两者中删除 .clicked 。我们不能使用 .toggleClass()，因为我们要添加到 $(this) 并从所有 div 中删除。

$('div, .overlay-text').on('click', function (e) { 
    if ($(this).hasClass('clicked')) {
        setTimeout(function (div) {
            return function () { div.css('z-index', '') ; } ;            
        } ($(this)), 1000) ;
       $('.overlay-text').hide();
       $('div').removeClass('clicked');
       $('.overlay-text').removeClass('clicked');
    }
    else {
        $(this).css('z-index', 400) ;
        setTimeout(function(){$('.overlay-text').show();},1000);
        $(this).addClass('clicked');
        $('.overlay-text').addClass('clicked');
    }
});

---

摘要

我已经在 IE10 中进行了测试，它可以工作。

工作示例:

---

额外

如果我可以说，您正在使用的 CSS 结构可以改进，您的动画看起来会更好。 Chrome 和 IE 在左侧两个 block 的动画期间都会闪烁。

这是因为它们的宽度和位置正在动画化。如果您将它们放置在 right:0 处，则只有它们的宽度会产生动画，并且看起来会平滑很多。

我为您创建了一个 Fiddle 来解决上述问题。我用的是绝对定位。 CSS 最终变得更短，但主要是动画不会闪烁。看看:

工作示例:

额外 2

根据 OP 的评论，我们将阻止用户双击。由于所有动画都需要 1 秒，因此我们将在每次点击后 1 秒内禁止点击触发任何内容。

其实做起来很简单。上面的Extra 1中，我们清理了JS，就变成了这样:

$('div, .overlay-text').on('click', function (e) { 
    if ($(this).hasClass('clicked')) {
       $('.overlay-text').hide();
       $('div').removeClass('clicked');
       $('.overlay-text').removeClass('clicked');
    }
    else {
        setTimeout(function(){$('.overlay-text').show();},1000);
        $(this).addClass('clicked');
        $('.overlay-text').addClass('clicked');
    }
});

我们只需要添加一个以 true 开头的全局变量。一旦发生点击，立即设置为 false，1 秒后设置为 true。然后我们只检查它是否为真，如果为假则不执行任何操作:

var notdouble = 1;
$('div, .overlay-text').on('click', function (e) {
    if (notdouble) {
        if ($(this).hasClass('clicked')) {
           $('.overlay-text').hide();
           $('div').removeClass('clicked');
           $('.overlay-text').removeClass('clicked');
        }
        else {
            setTimeout(function(){$('.overlay-text').show();},1000);
            $(this).addClass('clicked');
            $('.overlay-text').addClass('clicked');
        }
        notdouble=0;
        setTimeout(function(){notdouble=1;},1000);
    }
});

工作示例:

请注意，这是根据 Fiddle 版本 13 中的新结构构建的，因此它不能与原始结构的固定版本完全兼容。不过这个概念可以进行调整。