jQuery面板滑块随着按钮点击打开，但不会关闭 [英] jQuery panel slider opens with button click but won't close

问题描述

我的页面上有一个按钮，通过使用jquery和modernizr框架打开右侧面板。按钮被放置在屏幕的最右边位置。当它被点击时，它会随着打开的面板向左滑动。问题是，它不会滑回到它再次点击时的位置。

I have a button on my page which opens a right panel by using jquery and modernizr frameworks. Button is placed on the rightmost place of screen. When it is clicked it slides to the left with the panel which it opens. The problem is, it won't slide back to where it was when it is clicked again.

HTML：

<!-- right panel -->
<div class="cd-panel from-right">
<header class="cd-panel-header">
    <h1>Views</h1>
    <a href="#0" class="cd-panel-close">Close</a>
</header>
<div class="cd-panel-container">
    <a href="#0" class="cd-btn">Views</a>
    <div class="cd-panel-content" ng-controller="ViewtreeCtrl">
        <div>
            Panel elements
        </div>
    </div>
    <!-- cd-panel-content -->
</div>
<!-- cd-panel-container -->

jQuery(document).ready(function($){
    //open the lateral panel
    $('.cd-btn').on('click', function(event){
        event.preventDefault();
        $('.cd-panel').addClass('is-visible');
    });
    //clode the lateral panel
    $('.cd-panel').on('click', function(event){
        if( $(event.target).is('.cd-panel') || $(event.target).is('.cd-panel-close') ) { 
            $('.cd-panel').removeClass('is-visible');
            event.preventDefault();
        }
    });
});

JsFiddle demo （您可以在JSFiddle上看到CSS）

JsFiddle demo (You can see the CSS on JSFiddle)

推荐答案

jQuery(document).ready(function($){
  //open the lateral panel
  $('.cd-btn').on('click', function(event){
  event.preventDefault();
//use toggleClass
  $('.cd-panel').toggleClass('is-visible');
   });

});

JSFIDDLE
http://jsfiddle.net/Lecgrfvu/3/

JSFIDDLE http://jsfiddle.net/Lecgrfvu/3/

这篇关于jQuery面板滑块随着按钮点击打开，但不会关闭的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！