jQuery-单击事件打破视差

时间:2018-12-21 17:40:57

标签: jquery

我有这样的点击事件:

$('.architectural-films').bind('click', function(e){
     $(".section1").toggleClass("toggle");
     e.preventDefault();
});

我在类建筑膜之前和之后也有视差,在单击按钮之前,两个视差都起作用,在单击按钮后,类建筑膜下面的视差被破坏了,不再有视差了。单击按钮后,类建筑影片上方的视差仍然有效。我的点击事件有问题吗?

这是我的CSS代码。

.section1 {
    max-height: 0px;
    transition: max-height 1.00s ease-out;
    overflow: hidden;
}
.toggle{
    max-height: 5000px;
    transition: max-height 1.30s ease-in;
}

这是视差的HTML

   <div data-vc-full-width="true" data-vc-full-width-init="true" data-vc-stretch-content="true" data-vc-parallax="1.5" data-vc-parallax-o-fade="on" data-vc-parallax-image="http://new.sekanskin.com/wp-content/uploads/2018/12/windows-walls-floors.jpg" class="vc_row wpb_row vc_row-fluid what-we-do-service vc_row-has-fill vc_row-no-padding vc_general vc_parallax vc_parallax-content-moving-fade js-vc_parallax-o-fade" style="position: relative; left: -405px; box-sizing: border-box; width: 1940px;">
        <div class="wpb_column vc_column_container vc_col-sm-12 skrollable skrollable-after" data-5p-top-bottom="opacity:0;" data-30p-top-bottom="opacity:1;" style="opacity: 0;">
            <div class="vc_column-inner">

                <div class="wpb_wrapper"></div>
            </div>
        </div>
        <div class="vc_parallax-inner skrollable skrollable-after" data-bottom-top="top: -50%;" data-top-bottom="top: 0%;" style="height: 150%; background-image: url(&quot;http://new.sekanskin.com/wp-content/uploads/2018/12/windows-walls-floors.jpg&quot;); top: 0%;">
        </div>
    </div>

0 个答案:

没有答案