当然slideDown
,slideUp
不要做你想做的,你说你希望它是左/右,而不是上/下。
如果您对问题的编辑添加jquery-ui
标签意味着您正在使用 jQuery UI,我会使用nnnnnn 的解决方案,使用 jQuery UI 的slide
效果。
如果不:
假设菜单一开始是可见的(编辑:oop,我认为这不是一个有效的假设;请参阅下面的注释),如果您希望它向左滑出然后从左侧滑回,您可以这样做:现场示例| 直播源
$(document).ready(function() {
// Hide menu once we know its width
$('#showmenu').click(function() {
var $menu = $('.menu');
if ($menu.is(':visible')) {
// Slide away
$menu.animate({left: -($menu.outerWidth() + 10)}, function() {
$menu.hide();
});
}
else {
// Slide in
$menu.show().animate({left: 0});
}
});
});
您需要放置position: relative
菜单元素。
请注意,我将 your 替换toggle
为click
,因为该形式toggle
已从 jQuery 中删除。
如果你想让菜单开始隐藏,你可以调整上面的。你想知道元素的宽度,基本上,当把它放在页外时。
此版本不关心菜单是否最初可见:Live Copy | 直播源
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div id="showmenu">Click Here</div>
<div class="menu" style="display: none; position: relative;"><ul><li>Button1</li><li>Button2</li><li>Button3</li></ul></div>
<script>
$(document).ready(function() {
var first = true;
// Hide menu once we know its width
$('#showmenu').click(function() {
var $menu = $('.menu');
if ($menu.is(':visible')) {
// Slide away
$menu.animate({left: -($menu.outerWidth() + 10)}, function() {
$menu.hide();
});
}
else {
// Slide in
$menu.show().css("left", -($menu.outerWidth() + 10)).animate({left: 0});
}
});
});
</script>
</body>
</html>