我的页面上有一个按钮,可通过使用jquery和modernizr框架打开右侧面板。按钮位于屏幕的最右侧。单击它时,它将随其打开的面板向左滑动。问题是,它不会滑回到再次单击时的位置。

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 -->


Javascript:
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)

最佳答案

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/

10-05 20:42
查看更多