使用按钮切换内容

Question

这是我到目前为止所拥有的......

http://codepen.io/john84/pen/FctgH

<div class="container">
    <div class="outer">
      <p>BOTTOM CONTENT</p>
        <div class="box">
          <p>TOP CONTENT</p>
        </div>
    </div>
</div>

.container {
  position:relative;
  overflow:hidden;
}

.outer {
  width: 300px;
  height: 300px;
  background: lightblue;
  overflow:hidden;
}
.box {
  position:absolute;
  bottom:0;
  left:0;
  width: 300px;
  height: 300px;
  margin-bottom: -300px;
  -webkit-transition: all 0.8s ease;
  -moz-transition: all 0.8s ease;
  -o-transition: all: 0.8s ease;
  transitions: all 0.8s ease;
  background: rgba(151, 251, 152, 1);
}
.outer:hover > .box {
  margin: 0;
}
.box p {
  margin: 0;
  padding: 5px 0 5px 0;
}

...我可以使用按钮切换而不是悬停来实现转换吗？如果这会产生影响，页面上会有多个这样的实例。

仅供参考 - 目前没有使用过JS，但我不反对使用它。

Answer 1

这是一个简单快捷的解决方案：

的 Jquery的：

$('.outer').click(function(e) {
    $('.box').toggleClass('show');
});

的 CSS：

.show {
    margin: 0;
}

和 exlcude 这部分css：

.outer:active > .box {
  margin: 0;
}

参见JSFiddle HERE

希望它有帮助...
对不起，如果我的英语不好......