jquery中的toggle与slideToggle的区别

2025-09-07

 jquery中的

toggle和slideToggle 方法,都可以实现对一个元素的显示和隐藏。强大啊~

区别是:

toggle:动态效果为从右至左。横向动作。

slideToggle:动态效果从下至上。竖向动作。

so,比如想实现一个树由下至上收缩的动态效果,就使用slideToggle就ok了。

此外,toggle和slideToggle 还有一些参数可以设置,具体看jQuery的API就可以了~

 

toggle的用法:



width:100px; height:100px; background-color:red;" >


 

slideToggle的用法:

 

<br/>    <br/>    <style type="text/css"><br/> .imgclass<br/> {<br/> width: 300px;<br/> height: 300px;<br/> border: solid 1px red;<br/> }<br/> </style><br/>    <br/><br/><br/>    <p><br/>        </p><p><br/>            <input type="button" href="/tags/25677.html" target="_blank"/>value="上拉"><input type="button"/>                value="下拉" /><input type="button" value="自动上拉下拉"/></p><br/>        <p><br/>            </p><br/>    <br/></div> <p><strong>标签:</strong> <a href="/k-slidetoggle.html" title="slidetoggle">slidetoggle</a> </p> <p><strong>本文地址:</strong><a href="https://www.shjdjh.com/news/213062.html" target="_blank" title="jquery中的toggle与slideToggle的区别">https://www.shjdjh.com/news/213062.html</a></p> <p><strong>免责声明:</strong>本站内容仅用于学习参考,信息和图片素材来源于互联网,如内容侵权与违规,请联系我们进行删除,我们将在三个工作日内处理。联系邮箱:cloudinto#qq.com(把#换成@) </p> </div> </div> <div class="articles_page clearfix"> <a href="/news/213061.html" class="articles_page_l" title="CSS实现透明度变化的动画 (淡入淡出效果)"> <div class="articles_page_l_btn"> <img class="btn_icon" style="margin-right:5px;" src="/static/default/styles/images/icon_pre.png" alt="CSS实现透明度变化的动画 (淡入淡出效果)"> <span class="btn_text">上一篇</span> </div> <div class="articles_page_l_text">CSS实现透明度变化的动画 (淡入淡出效果)</div> </a> <a href="/news/213063.html" class="articles_page_r" title="所有的vb的变量类型"> <div class="articles_page_r_btn" > <span class="btn_text">下一篇</span> <img class="btn_icon" style="margin-left:5px;" src="/static/default/styles/images/icon-next.png" alt="所有的vb的变量类型"> </div> <div class="articles_page_r_text" >所有的vb的变量类型</div> </a> </div> <div class="recommArticle"> <div class="preArtTitle clearfix" > <div class="title">文章推荐</div> </div> <div> <div class="recArticleItems clearfix"> <div class="articleItem"> <a href="/news/213062.html" title="jquery中的toggle与slideToggle的区别"> <div class="articleItemTop"> <img class="articleItemImg" src="/static/default/styles/imgs/152.jpg" alt="jquery中的toggle与slideToggle的区别"> <div class="viewNum"> <img class="viewNumIcon" src="/static/default/styles/images/lookIcon.png" alt="jquery中的toggle与slideToggle的区别"> <span class="tipViewNum">8353</span> </div> </div> <div class="articleItemInfo"> <div class="articleItemText">jquery中的toggle与slideToggle的区别</div> <div class="articleItemBottomInfo"> <span class="articleItemBottomTip">2025-09-07</span> </div> </div> </a> </div> <div class="articleItem"> <a href="/news/207329.html" title="slideToggle+slideup实现手机端折叠菜单效果实例代码"> <div class="articleItemTop"> <img class="articleItemImg" src="/static/default/styles/imgs/81.jpg" alt="slideToggle+slideup实现手机端折叠菜单效果实例代码"> <div class="viewNum"> <img class="viewNumIcon" src="/static/default/styles/images/lookIcon.png" alt="slideToggle+slideup实现手机端折叠菜单效果实例代码"> <span class="tipViewNum">7460</span> </div> </div> <div class="articleItemInfo"> <div class="articleItemText">slideToggle+slideup实现手机端折叠菜单效果实例代码</div> <div class="articleItemBottomInfo"> <span class="articleItemBottomTip">2025-09-07</span> </div> </div> </a> </div> </div> </div> </div> </div> <div class="right contentRight" style="position:relative;"> <div class="recommRead"> <div class="recommReadTitle yellowafter" > <span>推荐阅读</span> </div> <div class="readList"> <a href="/news/206593.html" title="ping无法访问目标主机?" class="readList-item"> <img class="readList-item-l" src="/static/default/styles/imgs/53.jpg" alt="ping无法访问目标主机?"> <div class="readList-item-r" style="width: 197px;"> <div class="readList-title">ping无法访问目标主机?</div> <div class="readList-tips"> <span class="readList-date">2025-09-07</span> </div> </div> </a> <a href="/news/174085.html" title="海尔空调故障代码有哪些 海尔空调故障代码大全" class="readList-item"> <img class="readList-item-l" src="/static/default/styles/imgs/244.jpg" alt="海尔空调故障代码有哪些 海尔空调故障代码大全"> <div class="readList-item-r" style="width: 197px;"> <div class="readList-title">海尔空调故障代码有哪些 海尔空调故障代码大全</div> <div class="readList-tips"> <span class="readList-date">2025-09-07</span> </div> </div> </a> <a href="/news/206122.html" title="HTML中的caption属性是什么意思?caption标签在HTML中的用法(附实例)" class="readList-item"> <img class="readList-item-l" src="/static/default/styles/imgs/249.jpg" alt="HTML中的caption属性是什么意思?caption标签在HTML中的用法(附实例)"> <div class="readList-item-r" style="width: 197px;"> <div class="readList-title">HTML中的caption属性是什么意思?caption标签在HTML中的用法(附实例)</div> <div class="readList-tips"> <span class="readList-date">2025-09-07</span> </div> </div> </a> <a href="/news/244295.html" title="提升网站排名,打造高质量原创文章的秘诀!" class="readList-item"> <img class="readList-item-l" src="/static/default/styles/imgs/117.jpg" alt="提升网站排名,打造高质量原创文章的秘诀!"> <div class="readList-item-r" style="width: 197px;"> <div class="readList-title">提升网站排名,打造高质量原创文章的秘诀!</div> <div class="readList-tips"> <span class="readList-date">2025-09-07</span> </div> </div> </a> <a href="/news/193356.html" title="c语言long long怎么用" class="readList-item"> <img class="readList-item-l" src="/static/default/styles/imgs/9.jpg" alt="c语言long long怎么用"> <div class="readList-item-r" style="width: 197px;"> <div class="readList-title">c语言long long怎么用</div> <div class="readList-tips"> <span class="readList-date">2025-09-07</span> </div> </div> </a> <a href="/news/225110.html" title="视频播放软件开发费用 开发视频播放器需要用到的技术" class="readList-item"> <img class="readList-item-l" src="/static/default/styles/imgs/171.jpg" alt="视频播放软件开发费用 开发视频播放器需要用到的技术"> <div class="readList-item-r" style="width: 197px;"> <div class="readList-title">视频播放软件开发费用 开发视频播放器需要用到的技术</div> <div class="readList-tips"> <span class="readList-date">2025-09-07</span> </div> </div> </a> <a href="/news/245666.html" title="要怎样选择好网站的关键词呢(要怎样选择好网站的关键词呢英语)" class="readList-item"> <img class="readList-item-l" src="/static/default/styles/imgs/153.jpg" alt="要怎样选择好网站的关键词呢(要怎样选择好网站的关键词呢英语)"> <div class="readList-item-r" style="width: 197px;"> <div class="readList-title">要怎样选择好网站的关键词呢(要怎样选择好网站的关键词呢英语)</div> <div class="readList-tips"> <span class="readList-date">2025-09-07</span> </div> </div> </a> <a href="/news/206530.html" title="所有指令的有序集合叫什么" class="readList-item"> <img class="readList-item-l" src="/static/default/styles/imgs/175.jpg" alt="所有指令的有序集合叫什么"> <div class="readList-item-r" style="width: 197px;"> <div class="readList-title">所有指令的有序集合叫什么</div> <div class="readList-tips"> <span class="readList-date">2025-09-07</span> </div> </div> </a> <a href="/news/202977.html" title="cips与swift系统区别" class="readList-item"> <img class="readList-item-l" src="/static/default/styles/imgs/79.jpg" alt="cips与swift系统区别"> <div class="readList-item-r" style="width: 197px;"> <div class="readList-title">cips与swift系统区别</div> <div class="readList-tips"> <span class="readList-date">2025-09-07</span> </div> </div> </a> <a href="/news/200953.html" title="联想服务器为什么这么厉害" class="readList-item"> <img class="readList-item-l" src="/static/default/styles/imgs/135.jpg" alt="联想服务器为什么这么厉害"> <div class="readList-item-r" style="width: 197px;"> <div class="readList-title">联想服务器为什么这么厉害</div> <div class="readList-tips"> <span class="readList-date">2025-09-07</span> </div> </div> </a> </div> </div><div class="hotTag" style="margin-bottom: 12px;"> <div class="hotFindTitle yellowafter" style="line-height:normal;padding-left:16px;font-size:20px;">热门标签</div> <div class="hotFindList clearfix"> <a href="/" title="网站未收录的原因及解决方法是什么" class="hotList left">网站未收录的原因及解决方法是什么</a> <a href="/" title="3时" class="hotList left">3时</a> <a href="/" title="神武" class="hotList left">神武</a> <a href="/" title="搜索引擎优化:如何让你的网站更容易被收录到" class="hotList left">搜索引擎优化:如何让你的网站更容易被收录到</a> <a href="/" title="申请方式" class="hotList left">申请方式</a> <a href="/tags/117746.html" title="占领用" class="hotList left">占领用</a> <a href="/tags/117745.html" title="真正的人" class="hotList left">真正的人</a> <a href="/tags/117744.html" title="原型理" class="hotList left">原型理</a> <a href="/" title="魔道" class="hotList left">魔道</a> <a href="/" title="韩服" class="hotList left">韩服</a> <a href="/tags/117741.html" title="快消的" class="hotList left">快消的</a> <a href="/" title="快速提高网站收录的技巧和方法" class="hotList left">快速提高网站收录的技巧和方法</a> </div> </div> <div class="new-question"> <div class="recommReadTitle yellowafter" > <span>推荐百科</span> <a class="lookMore" href="/c/67.html" title="推荐百科">查看更多</a> </div> <div class="question-list"> <a href="/news/184353.html" class="question-list-item text2" title="电脑有噪音怎么办"> <span class="question-list-item-dot"></span> <span class="list-item-text text2">电脑有噪音怎么办</span> </a> <a href="/news/243556.html" class="question-list-item text2" title="网站推广公司哪家好"> <span class="question-list-item-dot"></span> <span class="list-item-text text2">网站推广公司哪家好</span> </a> <a href="/news/255859.html" class="question-list-item text2" title="淘宝店铺怎么开(开淘宝店铺的详细步骤)"> <span class="question-list-item-dot"></span> <span class="list-item-text text2">淘宝店铺怎么开(开淘宝店铺的详细步骤)</span> </a> <a href="/news/200621.html" class="question-list-item text2" title="什么是版权申报项目管理"> <span class="question-list-item-dot"></span> <span class="list-item-text text2">什么是版权申报项目管理</span> </a> <a href="/news/245947.html" class="question-list-item text2" title="如何建站才能使网站更有特色(如何建站才能使网站更有特色呢)"> <span class="question-list-item-dot"></span> <span class="list-item-text text2">如何建站才能使网站更有特色(如何建站才能使网站更有特色呢)</span> </a> </div> </div> </div> </div> </div> <div class="footer mobileHide"> <div class="footerLi"> <div class="container footerBottom"> <p> <span>Powered by CLOUDINTO PTE. LTD. © 2010-2025 有料笔记 </span> <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow"></a> </p> <p><a href="/sitemap.xml">网站地图</a></p> </div> </div> </div> <script src="/static/default/styles/js/jquery-2.1.1.min.js"></script> <script src="/static/default/styles/js/swiper.min.js"></script> <script src="/static/default/styles/js/main.js"></script> </html>