slidetoggle方法(slidetoggle)
jQuery slideToggle() 方法 多个div怎么写
!DOCTYPE?html
html
head
????script?src="/jquery/jquery-1.11.1.min.js"/script
????script?type="text/javascript"
????????$(document).ready(function()?{
????????????$(".flip").click(function()?{
????????????????$(".panel:eq("?+?$(this).index(".flip")?+?")").slideToggle("slow");
????????????});
????????});
????/script
????style?type="text/css"
????????div.panel,p.flip?{
????margin:?0px;
????padding:?5px;
????text-align:?center;
????background:?#e5eecc;
????border:?solid?1px?#c3c3c3;
}
div.panel?{
????height:?120px;
????display:?none;
}
????/style
/head
body
????div?class="panel"
????????pW3School?-?领先的?Web?技术教程站点/p
????????p在?W3School，你可以找到你所需要的所有网站建设教程。/p
????/div
????p?class="flip"请点击这里/p
????div?class="panel"
????????pW3School?-?领先的?Web?技术教程站点/p
????????p在?W3School，你可以找到你所需要的所有网站建设教程。/p
????/div
????p?class="flip"请点击这里/p
/body
/html
jQuery中slideToggle()这个动作是从上至下的，如何让它从右至左展开？
slideToggle() 方法通过使用滑动效果（高度变化，显示是从上到下变换，隐藏是从下到上）来切换元素的可见状态。
如果被选元素是可见的，则隐藏这些元素，如果被选元素是隐藏的，则显示这些元素。
jquery怎么实现从右到左滑出来的效果？
引入jquery.js，复制以下代码，即可运行
1，style type="text/css"
2，.slide {
3，position: relative;
4，height: 200;
5，lightyellow;
6，}
7 ，
8，.slide .inner {
9，position: absolute;
10，left: 0;
11，bottom: 0;
12，height: 100;
13，lightblue; ,
14，width: 100%
15，}
16，/style
1、slidetoggle() 交替slidedown(),slideup()
Html代码
div id="slidebottom" class="slide"?
button
slide it
/button
div class="inner"
Slide from bottom
/div
/div
Js代码
$('#slidebottom button').click(function() {
$(this).next().slideToggle();
});
2、左侧横向交替滑动 Animate Left
Html代码
div id="slidewidth" class="slide"
button
slide it
/button
div class="inner"
Slide from bottom
/div
/div
Js代码
$("#slidewidth button").click(function(){
$(this).next().animate({width: 'toggle'});
});
3、左侧横向交替滑动 Animate Left Margin （非隐藏）
Html代码
div id="slideleft" class="slide" style="width: 50%;float: right"
button
slide it
/button
div class="inner"
Slide from bottom
/div
/div
Js代码
$("#slideleft button").click(function(){
var $lefty = $(this).next();
$lefty.animate({
left:parseInt($lefty.css('left'),10)==0 ? -$lefty.outerWidth() : 0
});
});
4、右侧横向滑动Slide to right
Html代码
div id="slidemarginleft" class="slide" style="width: 60%;float: left"
button
slide it
/button
div class="inner"
Slide from bottom
/div
/div
Js代码
$("#slidemarginleft button").click(function(){
var $marginlefty = $(this).next();
$marginlefty.animate({
marginLeft:parseInt($marginlefty.css('marginLeft'),10)==0 ? $marginlefty.outerWidth() : 0
});
});
jquery清除单选选中状态。
关掉窗口时：$("input[type='radio']").removeAttr('checked')。
Jquery 常用方法
关于页面元素的引用。
通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法，且返回的对象为jquery对象（集合对象），不能直接调用dom定义的方法。
jQuery对象与dom对象的转换 。
只有jquery对象才能使用jquery定义的方法。注意dom对象和jquery对象是有区别的，调用方法时要注意操作的是dom对象还是jquery对象。
如何获取jQuery集合的某一项。
对于获取的元素集合，获取其中的某一项（通过索引指定）可以使用eq或get(n)方法或者索引号获取，要注意，eq返回的是jquery对象，而get(n)和索引返回的是dom元素对象。对于jquery对象只能使用jquery的方法，而dom对象只能使用dom的方法，如要获取第三个div元素的内容。
集合处理功能。
对于jquery返回的集合内容无需我们自己循环遍历并对每个对象分别做处理，jquery已经为我们提供的很方便的方法进行集合的处理。 包括两种形式： $("p").each(function(i){this.style.color=['#f00','#0f0','#00f'][i]})
几个实用特效功能 。
其中toggle()和slidetoggle()方法提供了状态切换功能。
如toggle()方法包括了hide()和show()方法。
slideToggle()方法包括了slideDown()和slideUp方法。
完善的事件处理功能
Jquery已经为我们提供了各种事件处理方法，我们无需在html元素上直接写事件，而可以直接为通过jquery获取的对象添加事件。
jquery中slideToggle是什么意思?
建议你下载个jquery的API手册看看，上有详细的用法，简单明了。
有slideUp slideDown slideToggle三个方法，up就是收起，Down就是展开，toggle是判断，当前如果为收起的就展开，展开的则收起。