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>

我为它添加了一个小提琴：

DEMO：http://jsfiddle.net/Newtt/AqV96/

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

Answer 1

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

在点击事件上使用相同的内容并检查它是否已“点击”了类。您也可以使用切换功能。

Answer 2

尝试使用此尺寸！

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

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

单击时恢复CSS转换

2 个答案: