javascript - 显示/隐藏内容在IE10及更低版本上不起作用。 div不可点击

我有一个jsfiddle here，它演示了一个同位素库，单击该同位素库时，描述会向上滑动。它在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类不可单击。我所做的解决方案是删除showhide div，并在bits类中添加showhide类，以使整个div可单击。我还取消了showhide类的100％宽度。

Here's an updated fiddle

    <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 -->