我有一个站点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');
});