Javascript Div转换-IE与其他

我有一个显示一系列框的JSFIDLE。如果单击其中一个框，它将展开以覆盖其他框，然后显示文本。单击现在展开的长方体时，它将收缩到其原始宽度和高度。这种javascript在Firefox、Chrome和Safari中完美地工作。但是，在Internet Explorer（v10）中，该框会展开，但无法缩回。有没有关于为什么会这样的见解

JSFiddle：

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') ;

});

---

不在IE9中工作，因为div click事件从不触发。我想它已经被class=“overlay text”一节涵盖了。但我已经找到了一个解决方法，处理该节的click事件并触发div click事件

$('section').on('click', function (e) { 
    $('.overlay-text').hide();
    $( "div" ).addClass('clicked') ;
    $( "div" ).trigger( "click" );
});

---

不在IE9中工作，因为div click事件从不触发。我想它已经被class=“overlay text”一节涵盖了。但我已经找到了一个解决方法，处理该节的click事件并触发div click事件

$('section').on('click', function (e) { 
    $('.overlay-text').hide();
    $( "div" ).addClass('clicked') ;
    $( "div" ).trigger( "click" );
});

发生什么事 问题: IE11中添加了指针事件支持。IE10忽略了这一点，因为你的覆盖层在上面，鼠标正在与它交互。不过我们可以绕开它

解决方案： 我们需要删除对CSS规则的依赖。为此，我们需要做两件事：

1.）即使没有出现

：hover

效果，我们也需要使悬停颜色保持应用状态。我们可以向CSS中添加另一个选择器，以便

.clicked

类将产生颜色

2.）我们需要解决单击

.overlay_text

时发生的问题，并使用它触发收缩动画

---

代码 1.）悬停效应 我们需要在每个位置添加另一个选择

：使用悬停

：

旧CSS： 新CSS： 对所有4个方框规则重复上述内容

2.

。覆盖文本

触发器 我们需要点击

.overlay text

触发收缩

老JS： 新JS: 我们必须在

.on（）

代码中添加新的选择器，然后我们必须将

。单击

到两个选定的正方形中，添加覆盖部分。最后，我们必须从两者中删除

。单击
。我们不能使用
.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在两个左侧块的动画中都会闪烁

这是因为它们的宽度和位置正在设置动画。如果您从
右侧：0
定位它们，则只有它们的宽度会设置动画，并且看起来会更平滑

我已经为您创建了一个小提琴来解决上述问题。我使用绝对定位。CSS最终会变短，但主要是动画不会闪烁。看一看:

工作示例：
额外2
根据OP的评论，我们将阻止用户双击。由于所有动画都需要1秒，我们将在每次单击后1秒内禁止单击触发任何内容

这其实很简单。在上面的额外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中的新结构构建的，因此它不能完全与原始结构的固定版本一起工作。不过，这个概念可以修改。
发生了什么
问题:
IE11中添加了指针事件支持。IE10忽略了这一点，因为你的覆盖层在上面，鼠标正在与它交互。不过我们可以绕开它

解决方案：
我们需要删除对CSS规则的依赖。为此，我们需要做两件事：

1.）即使没有出现
：hover
效果，我们也需要使悬停颜色保持应用状态。我们可以向CSS中添加另一个选择器，以便
.clicked
类将产生颜色

2.）我们需要解决单击
.overlay_text
时发生的问题，并使用它触发收缩动画


代码
1.）悬停效应
我们需要在每个位置添加另一个选择
：使用悬停
：

旧CSS：
新CSS：
对所有4个方框规则重复上述内容

2.
。覆盖文本
触发器
我们需要点击
.overlay text
触发收缩

老JS：
新JS:
我们必须向
.on（）
代码中添加一个新的选择器，然后我们必须将
添加到所选的两个方块中。单击
，添加覆盖部分。最后，我们必须从两者中删除
。单击
。我们不能使用
.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在两个左侧块的动画中都会闪烁

这是因为它们的宽度和位置正在设置动画。如果您从
右侧：0
定位它们，则只有它们的宽度会设置动画，并且看起来会更平滑

我已经为您创建了一个小提琴来解决上述问题。我使用绝对定位。CSS最终会变短，但主要是动画不会闪烁。看一看:

工作示例：
额外2
根据OP的评论，我们将阻止用户双击。由于所有动画都需要1秒，我们将在每次单击后1秒内禁止单击触发任何内容

这其实很简单。在上面的额外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');
    }
});

我们只需要添加一个全局变量