JQuery .toggle方法

Question

我有以下JavaScript / JQuery代码，它应该使div SideBar出现在屏幕上并变为正文大小的1/5。我在Firefox / Chrome控制台中没有出错，并且不知道它为什么不起作用。如果我将我的第一个切换方法的主体移动到方法本身，它工作正常，所以我假设我使用的是错误的切换方法。

var bodyHeight = $(window).height();
var bodyWidth = $(window).width();
sideWidth = bodyWidth / 5;

function slideSideBar() {
    $('#SideBar').toggle(
        function() {
            $("#SideBar").animate({
                opacity: 0.6,
                width: sideWidth
            }, 600);
        }, 
        function() {
            $("#SideBar").animate({
                opacity: 0,
                width: 0
            }, 600);
        });
}

CSS是：

#SideBar { 
    height: 100%;
    width: 0%;
    opacity: 0;
    font-family: Arial, Tahoma, Verdana;
    color: white; 
    background-color: black;
}

Answer 1

从jQuery 1.8开始，toggle event（接受两个函数的toggle版本）已被弃用，从1.9开始，它被删除了。更多信息this question and its answers。

要获得旧的toggle行为，请维护自己的旗帜（或者在您的情况下，检查不透明度）并自行调用toggle method（不是事件）。

这是标记方法，因为它可能更适合animate情况（请注意stop的使用，即使在＆lt; = 1.8中也可能需要{：1}}：< / p>

var bodyHeight = $(window).height();
var bodyWidth = $(window).width();
sideWidth = bodyWidth / 5;

function slideSideBar() {
    var sidebar = $("#SideBar");
    var flag = sidebar.css("opacity") != 0;

    sidebar.click(function() {
        var options = flag ? {opacity: 0, width: 0} : {opacity: 0.6, width: sideWidth};
        flag = !flag;
        sidebar.stop(true, true).animate(options, 600);
    });
}

或者实际上，在stop：

之后检查不透明度是正常的

var bodyHeight = $(window).height();
var bodyWidth = $(window).width();
sideWidth = bodyWidth / 5;

function slideSideBar() {
    $("#SideBar").click(function() {
        var sidebar = $(this);
        sidebar.stop(true, true);
        sidebar.animate(
            sidebar.css("opacity") != 0 ? {opacity: 0, width: 0} : {opacity: 0.6, width: sideWidth},
            600
        );
    });
}