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

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

阅读量：6162 次

发布时间：2019-06-21

本文共 1158 字，大约阅读时间需要 3 分钟。

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

<head>

<style>

#content,#slidetoggle{

background-color:#B7CA9F;

border:1px solid #D7D7D7;

margin:0px;

padding:7px;

text-align:center;

}

#content{

height:100px;

display:none;

}

</style>

$(document).ready(function(){

$("#slidetoggle").click(function(){

$("#content").slideToggle();

})

</script>

<title>Jquery SlideToggle</title>

</head>

<body>

<p>我是李汉团，英文名Adam Li。</p>

<p>现从事PHP程序员工作。</p>

</div>

<p id="slidetoggle">请点击这里</p>

</body>

</html>

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

转载于:https://my.oschina.net/adamboy/blog/28093

你可能感兴趣的文章