>

클릭 이벤트로 열리는 측면 패널이 있습니다. 패널을 닫으면 오른쪽에서 미끄러 져 왼쪽으로 이동하지만 오른쪽에서 다시 시작해야합니다. 이제 아이콘을 왼쪽에서 다시 시작할 때 아이콘을 다시 클릭하면 도움이 될 것입니다.

아이콘을 클릭한다고 가정 해 보겠습니다. -화면 오른쪽에서 패널이 열립니다. 패널을 닫을 때 -패널이 닫히고 화면의 왼쪽으로 이동 그런 다음 아이콘을 다시 클릭하면 -오른쪽 대신 왼쪽에서 패널이 열립니다.

HTML :

<div class="open-slide from-right">
    <a href="#0" class="close"></a>
    <div class="open-slide-container"></div>
</div>
<div class="open-btn">
   <i class="glyphicon glyphicon-plus-sign">
</div>

jQuery :

jQuery(function($) {
    //open the lateral panel
    $('.open-btn').on('click', function(event) {
        event.preventDefault();
        $('.open-slide').toggleClass('is-visible');
    });
    //close the lateral panel
    $('.open-slide').on('click', function(event) {
        if ($(event.target).is('.open-slide-close')) {
            $('.open-slide').removeClass('is-visible');
            // to close the panel from left
            $('.open-slide').toggleClass('from-left');
            event.preventDefault();
        }
    });
});

CSS :

.open-slide {
    position: fixed;
    top: 0;
    left: 0;
    visibility: hidden;
    -webkit-transition: visibility 0s 0.6s;
    -moz-transition: visibility 0s 0.6s;
    transition: visibility 0s 0.6s;
    font-family: 'Open Sans', sans-serif;
    z-index: 9;
}
.open-slide::after {
    /* overlay layer */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    cursor: pointer;
    -webkit-transition: background 0.3s 0.3s;
    -moz-transition: background 0.3s 0.3s;
    transition: background 0.3s 0.3s;
}
.open-slide.is-visible {
    visibility: visible;
    -webkit-transition: visibility 0s 0s;
    -moz-transition: visibility 0s 0s;
    transition: visibility 0s 0s;
}
.open-slide.is-visible::after {
    background: rgba(0, 0, 0, 0.6);
    -webkit-transition: background 0.3s 0s;
    -moz-transition: background 0.3s 0s;
    transition: background 0.3s 0s;
}
.open-slide.is-visible .open-slide-close::before {
    -webkit-animation: cd-close-1 0.6s 0.3s;
    -moz-animation: cd-close-1 0.6s 0.3s;
    animation: cd-close-1 0.6s 0.3s;
}
.open-slide.is-visible .open-slide-close::after {
    -webkit-animation: cd-close-2 0.6s 0.3s;
    -moz-animation: cd-close-2 0.6s 0.3s;
    animation: cd-close-2 0.6s 0.3s;
}
.from-right .open-slide-container {
    right: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    -moz-transform: translate3d(100%, 0, 0);
    -ms-transform: translate3d(100%, 0, 0);
    -o-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
}
.from-left .open-slide-container {
    left: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    -moz-transform: translate3d(-100%, 0, 0);
    -ms-transform: translate3d(-100%, 0, 0);
    -o-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
}
.is-visible .open-slide-container {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-transition-delay: 0.3s;
    -moz-transition-delay: 0.3s;
    transition-delay: 0.3s;
}

  • 답변 # 1

    질문에 대한 충분한 정보를 제공하지 않았기 때문에. 이것을 시도하십시오 :

           jQuery(function($) {
            //open the lateral panel
            $('.open-btn').on('click', function(event) {
                event.preventDefault();
                $('.open-slide').toggleClass('is-visible');
            });
            //close the lateral panel
            $('.open-slide').on('click', function(event) {
                if ($(event.target).is('.close')) {
                    $('.open-slide').removeClass('is-visible');
                    // to close the panel from left
                    $('.open-slide').toggleClass('from-right');
        
                    event.preventDefault();
                }
            });
        });
    
    

관련 자료

  • 이전 codenameone - 코드 명 하나 - 트위터와 야후와의 소셜 로그인
  • 다음 c - sqlite 및 fast math 사용시 gcc 오류 발생 - "sqlite는 gcc의 -ffast-math 옵션과 함께 올바르게 작동하지 않습니다"