Question

我有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;
}

有人可以帮忙吗？感谢。

Answer 1

我找到了解决方案。将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 -->

显示/隐藏内容不适用于IE10及以下版本。 Div不可点击

1 个答案: