javascript - 在我将其 CSS 从右更改为左后，Jquery 面板 slider 不会关闭

Question

跟进 this问题。

我已经修复了 jquery。现在我想从左侧而不是右侧使用它。所以我将它的类从“cd-panel from-right”更改为“cd-panel from left”。打开时效果很好，但打开后按钮被禁用，无法关闭。

我试图调整 CSS 中的内容，例如将“左”更改为“右”，反之亦然，但没有成功。在 JSfiddle CSS 上，除了按钮的位置没有任何变化。

HTML:

<div class="cd-panel from-left">
    <div class="cd-panel-container">
    <button href="#0" class="cd-btn btn-primary">Views</button>
    <div class="cd-panel-content" ng-controller="ViewtreeCtrl">

    </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').toggleClass('is-visible');
    });
});

JsFiddle demo (你可以在 JSFiddle 上看到 CSS)

Answer 1

该按钮未被禁用，但它显示在 .cd-panel-content div 下。

要解决这个问题，可以在.cd-btn 类中添加z-index:1。

另一种解决方案可能是将 pointer-events:none 添加到 .cd-panel-content 中，但在这种情况下，.cd-panel 上的链接-content 不起作用，所以我将使用 z-index 解决方案。