javascript - 单击时恢复 CSS 过渡

Question

我有一个 div learn-more，它通过添加一个 CSS 类扩展到整个页面的大小，如下所示:

.learn-more{
    padding:10px;
    font-size: 20px;
    text-align: center;
    margin-top:20px;
    font-family: klight;
    -webkit-transition:2s;
    -moz-transition:2s;
    transition:2s;
    margin-left: auto;
    margin-right: auto;
    cursor: pointer;
}
.clicked{
    width:100% !important;
    visibility: visible;
    height: 600px !important;
    margin-top:-111px !important;
    z-index: 10;
}

这个添加是使用JS完成的，如下:

$('.learn-more').on('click', function(){
    $(this).addClass('clicked');
    $(this).addClass('fire-inside');
});

现在的问题是我在扩展的 div 中有一个按钮来减小同一个扩展窗口的大小。

做同样事情的 JavaScript 是

$('.close-overlay').on('click', function(){
    $('.learn-more-btn').removeClass('clicked');
    $('.learn-more-btn').removeClass('fire-inside');
});

然而，这不起作用，因为浏览器正在读取 close-overlay 的点击作为 learn-more 的点击作为它的 HTML

 <div class="learn-more fire-btn">
   <p class="fmore">
      Find out more
   </p>
   <div class="inside-text">
    <p >
      ...
    </p>                
    <p class="close-overlay">Close</p>
   </div>
 </div>

我为它添加了一个 fiddle :

演示:http://jsfiddle.net/Newtt/AqV96/

点击关闭后，我需要将叠加层恢复为原始大小。

Answer 1

试穿这个尺寸!

$(".fmore").on("click", function () {
    $(".learn-more").addClass("clicked");
});

$(".close-overlay").on("click", function () {
    $(".learn-more").removeClass("clicked");
});