javascript - jQuery .toggle方法

我有以下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;
}

最佳答案

从jQuery 1.8开始，已弃用toggle event（接受两个功能的toggle版本），从1.9开始，已将其删除。 this question and its answers中的更多内容。

要获得旧的toggle行为，请维护您自己的标志（或者，检查您的不透明度），然后自己调用toggle method（不是事件）。

这是flag方法，因为它可能更适合animate情况（请注意使用stop，甚至在

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
        );
    });
}

关于javascript - jQuery .toggle方法，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/24480860/