Jquery工作常用实例——滑动切换(在隐藏与显示之间)被选元素

一:大家都知道$(selector).slideUp()能向上滑动隐藏被选元素,$(selector).slideDown()能 向下滑动显示被选元素,那么如果我们要实现这么一个功能:点击一个按纽,首次点向下滑动显示被选元素,第二次点击向上滑动隐藏被选元素,如此重复切换,怎么做到呢?

二:这时我们可以不用以上两个Jquery事件函数,用$(selector).slideToggle()更方便也更简单,它能对被选元素切换向上滑动和向下滑动

实例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style>
#content,#slidetoggle{
    background-color:#B7CA9F;
    border:1px solid #D7D7D7;
    margin:0px;
    padding:7px;
    text-align:center;
}
#content{
    height:100px;
    display:none;
}
</style>
<script type="text/javascript" src="jquery-1.6.1.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("#slidetoggle").click(function(){
            $("#content").slideToggle();
        })
    })
</script>
<title>Jquery SlideToggle</title>
</head>

<body>
<div id="content">
<p>我是李汉团,英文名Adam Li。</p>
<p>现从事PHP程序员工作。</p>
</div>
<p id="slidetoggle">请点击这里</p>
</body>
</html>

当我们点击“请点击这里”时,那么id为"content"的div中的内容将向下滑动显示(默认已设为隐藏),再次点击时id为"content"的div中的内容将向上滑动隐藏,如此重复切换。

你可能感兴趣的:(Jquery工作常用实例)