slideup()和slideDown()方法的使用

最新推荐文章于 2021-03-22 03:28:24 发布

iteye_20137

最新推荐文章于 2021-03-22 03:28:24 发布

阅读量1.6k

点赞数

分类专栏： jquery & ajax 文章标签： jQuery CSS JavaScript XHTML HTML ViewUI

本文链接：https://blog.csdn.net/iteye_20137/article/details/81928389

版权

jquery & ajax 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

最近比较闲，并且前段时间因为一个JQuery的问题卡的很是头疼，现在正好抽点功夫来学学JQuery。从helloworld的学习一直都觉得Jquery其实蛮好理解的，到slidedown()方法和slideUp()方法时，才看到这里有很多的方法都不知道是个什么意思，搞的一知半解的。baidu了一下，终于也明白个七八成了。现在把它写在这里，也是给遇到同样问题的朋友一个找答案的地方，虽然网上有很多，不过我自己写的终归是自己的，到时候再遇到同样的问题的时候我也不用到处乱找了，呵呵。先看一个我从中文入门教程上看到的例子：

　　<!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" />
<title>jQuery Starterkit</title>

</head>
<body>
<h1>jQuery </h1>
<div class="stuff">
<h3>Bird FAQ - click the questions to show the answers</h3>
<dl id="faq">
<dt>问题 1</dt>
<dd>问题 1 的答案</dd>

</div>

</body>
</html>

之前的疑问主要有：

　end() 、next()、slideUp()、slideDown() 四个方法。

在ready方法内：首先设置答案dd的字体样式为red。

然后用ID选择器 $('#faq') 获取到这个dl列表，然后find('dd')是去获取id为faq里的标签为dd的元素，调用hide()方法将其隐藏。这时候例子里调用了一个end()，返回到之前的faq对象，(这里可能会有点绕,

$('#faq') 此时对象为faq对象；

$('#faq').find('dd')此时的对象为dd

$('#faq').find('dd').end()此时又返回到faq元素.) 。接着获取dt的元素的onclick事件。在里面调用该对象的next()方法，就是调用当前的dd元素的下一个标签的内容，也就是该问题的答案咯。然后判断其样式，如果可见调用slideUp()将其隐藏，否则调用slideDown()方法显示。

第一次写这么多东西，没什么条理，多多包涵了各位！

本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/mzygssk/archive/2010/05/25/5622476.aspx