我有一个站点here,我想隐藏和显示带有标题中的按钮的侧边栏,但是它不起作用。这是我尝试过的:

<div id="B">
    <button>toggle</button>
</div>


$('button').toggle(function() {
    $('#sidebarright').animate({ left: 0 })
}, function() {
    $('#sidebarright').animate({ left: 200 })
})


什么都没发生。你能帮我找出问题所在吗?

最佳答案

您正在尝试使用的toggle()功能已被弃用,并已从最新版本的jQuery中删除。要复制它,可以将click()事件与简单的三元表达式一起使用。尝试这个:

$('button').click(function() {
    var $el = $('#sidebarright');
    $el.animate({
        left: parseInt($el.css('left'), 0) == 0 ? 200 : 0
    });
});


还要注意,您链接到网站上的页面不包含对jQuery的引用。这是您应该执行的操作,以及上述代码的完整实现:

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
    <script>
        $(function() {
            $('button').toggle(function() {
                var $el = $('#sidebarright');
                $el.animate({
                    left: parseInt($el.css('left'), 0) == 0 ? 200 : 0
                });
            });
        });
    </script>
</head>


还请注意,您可以通过仅使用CSS转换并切换类来简化此操作:

#sidebarright {
    /* UI styling rules here */
    left: 0;
    transition: left 0.5s
}
#sidebarright.open {
    left: 200;
}


$('button').click(function() {
    $('#sidebarright').toggleClass('open');
});

08-07 08:22