使用相同的可点击链接显示/隐藏Div?

时间:2012-12-18 04:08:13

标签: javascript jquery html

我最近遇到过这个剧本:

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("#showdiv").click(function(){
$(".dropdowndiv").slideDown(500);
});

$("#hide").click(function(){
$(".dropdowndiv").slideUp(500);
});

});

</script>

我用它来显示和隐藏页面顶部的div,它会打开整个页面。代码工作得足够简单,你点击一个链接,它向下滑动页面显示div,你点击另一个链接它隐藏div,这一切都在滑动进出动作。我想知道是否有办法而不是点击两个不同的链接我可以使用第一个链接滑动打开并滑动div关闭?

您可以在我的tumblr上看到实时预览:cielprince.tumblr.com

2 个答案:

答案 0 :(得分:2)

你的意思是,使用slideToggle

$("#showdiv").click(function () {
    $(".dropdowndiv").slideToggle("slow");
});

答案 1 :(得分:1)

$("#showdiv").click(function () {
   $(".dropdowndiv").stop().slideToggle();
});
完成

.stop是为了防止重复点击时排队动画。