显示/隐藏内容在IE10及以下版本无法工作.Div不可点击

Show/Hide content doesn't work on IE10 and below. Div not clickable

本文关键字：工作 Div 版本 隐藏 IE10 显示      更新时间：2023-09-26

我这里有一个jsfiddle，它演示了一个同位素图库，当你点击时，描述将滑上来。它在Firefox、Chrome和IE 11上运行良好，但在IE10及以下版本上就不行了。

脚本:

    $('.showhide').click(function() {
      $(this).toggleClass('showhidenew');
    });
CSS: 

.blurb {
  bottom: 0;
  color: white;
  padding: 20px;
  position: absolute;
}
.showhide {
  cursor: pointer;
  display: block;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  z-index: 1;
}
.more-content {
  background: #008dee;
  color: white;
  cursor: pointer;
  height: 100%;
  padding: 11px 20px;
  position: absolute;
  right: 0;
  top: 5px;
  z-index: 10;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
.showhide .more-content {
  top: 100%;
}
.showhide.showhidenew .more-content {
  top: 0;
}

.info {
  background: none repeat scroll 0 0 #323232;
  color: white;
  padding: 7px 15px;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 11;
}
.more.showthis{
  bottom: 0;
}

有人能帮忙吗?谢谢。

我找到了一个解决方案。将showhide类置于bits类之下会使showhide类不可点击。我所做的解决方案是删除showhidediv并在bits类中添加showhide类，以使整个div可单击。我还删除了showhide类的100%宽度。

这是一个更新的小提琴

    <div class="bits i-h3 showhide">
        <div class="more-content">
            <div class="info">X</div>
             <h2>Title</h2>
             <h5>Sub Title <br /> Description</h5>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
        <!-- morecontent -->
    <div class="blurb">
         <h2>Title</h2>
         <h5>Sub Title <br /> Description</h5>
    </div><!-- blurb -->
    <img src="http://placehold.it/580x450" alt="M Moser Associates" />
</div><!-- bits -->
相关文章：