Jquery Toggle 不起作用（它以某种方式隐藏了我的切换按钮）答案

【问题标题】：Jquery Toggle doesnt work (it hides my toggle button somehow)Jquery Toggle 不起作用（它以某种方式隐藏了我的切换按钮）
【发布时间】：2014-06-18 14:50:25
【问题描述】：

我正在使用 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);             
        });

【问题讨论】：

toggle() 就是这样做的，切换元素的可见性。您可能想改用click()。
确保将上面的 javascript 放入准备好的处理程序 $(document).ready(function() { // Handler for .ready() called. });
好吧，当我再次点击它时，我如何在点击事件中做到这一点，它又回来了？
你能创建jsfiddle吗？
您正在使用的toggle() 事件现在已弃用。您需要使用click()。当前toggle()函数隐藏/显示

标签： jquery jquery-ui twitter-bootstrap-3 jquery-animate

【解决方案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");
        }
    });
});

这应该为你做。（虽然我可能把动画弄错了）

【讨论】：