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

最新推荐文章于 2024-09-30 14:28:41 发布

weixin_33816946

最新推荐文章于 2024-09-30 14:28:41 发布

阅读量94

点赞数

文章标签： javascript xhtml python ViewUI

原文链接：https://my.oschina.net/adamboy/blog/28093

版权

2019独角兽企业重金招聘Python工程师标准>>>

一：大家都知道$(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>