MM *_* PP 30 javascript jquery jquery-ui jquery-effects
这是我的HTML代码:
<div id="showmenu">Click Here</div>
<div class="menu" style="display: none;">
<ul>
<li>Button1</li>
<li>Button2</li>
<li>Button3</li>
</ul>
</div>
我想.menu点击#showmenu从左到右的滑动(有动画).再次单击#showmenu或在站点页面的任何位置,.menu将隐藏(向后滑动).
我使用JQuery 2.0.3
我试过这个,但它没有做我想要的.
$(document).ready(function() {
$('#showmenu').toggle(
function() {
$('.menu').slideDown("fast");
},
function() {
$('.menu').slideUp("fast");
}
);
});
nnn*_*nnn 62
这种.toggle()方法是去除在1.9版本的jQuery从.你可以这样做:
$(document).ready(function() {
$('#showmenu').click(function() {
$('.menu').slideToggle("fast");
});
});
演示:http://jsfiddle.net/APA2S/1/
...但是问题中的代码会向上或向下滑动.要向左或向右滑动,您可以执行以下操作:
$(document).ready(function() {
$('#showmenu').click(function() {
$('.menu').toggle("slide");
});
});
演示:http://jsfiddle.net/APA2S/2/
注意到这需要jQuery-UI的幻灯片效果,但是你将这个标签添加到你的问题中,所以我认为这是可以的.
T.J*_*der 13
当然slideDown,slideUp不要做你想做的事,你说你希望它是左/右,而不是上/下.
如果您对添加jquery-ui标记的问题进行编辑意味着您正在使用jQuery UI,那么我将使用nnnnnn的解决方案,使用jQuery UI的slide效果.
如果不:
假设菜单开始可见(编辑:oops,我看到这不是一个有效的假设;请参阅下面的注释),如果你想让它滑向左边然后再从左边向后滑动,你可以这样做:实例 | 直播源
$(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菜单元素.
请注意,我替换了你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>
| 归档时间： |
|
| 查看次数： |
291947 次 |
| 最近记录： |