Question

我使用Bootstrap 3制作响应式管理仪表板。所以我创建了一个显示按钮并隐藏侧边栏。不知怎的，当我加载我的页面时，它隐藏了我的切换按钮，并且切换事件根本不起作用。

HTML

<div class="btn-toggle-sidebar">
    <i class="fa fa-bars fa-lg"></i>
</div>

<div class="sidebar-left">

</div>


<div class="page-content">

</div>

Jquery（使用jqueryUI）

 $(".btn-toggle-sidebar").toggle(function() {           
            $(".sidebar-left").animate({left: -220}, 500);
            $(".page-content").animate({marginLeft: 0}, 500);                       
        }, function() {         
            $(".sidebar-left").animate({left: 0}, 500);
            $(".page-content").animate({marginLeft: 220}, 500);             
        });

Answer 1

$(function(){
    $(".btn-toggle-sidebar").click(function(){
        if ($(this).hasClass("active")){
            $(".sidebar-left").animate({left: 0}, 500);
            $(".page-content").animate({marginLeft: 220}, 500); 
            $(this).removeClass("active");
        } else {
            $(".sidebar-left").animate({left: -220}, 500);
            $(".page-content").animate({marginLeft: 0}, 500);
            $(this).addClass("active");
        }
    });
});

这应该为你做。（虽然我可能错误地使用了动画）

Jquery Toggle无法工作（它以某种方式隐藏了我的切换按钮）

1 个答案: