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.lifejia.cn/news/213062.html" target="_blank" title="jquery中的toggle与slideToggle的区别">https://www.lifejia.cn/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/150.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">1428</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/106.jpg" alt="slideToggle+slideup实现手机端折叠菜单效果实例代码"> <div class="viewNum"> <img class="viewNumIcon" src="/static/default/styles/images/lookIcon.png" alt="slideToggle+slideup实现手机端折叠菜单效果实例代码"> <span class="tipViewNum">9540</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/175629.html" title="java环境变量设置" class="readList-item"> <img class="readList-item-l" src="/static/default/styles/imgs/15.jpg" alt="java环境变量设置"> <div class="readList-item-r" style="width: 197px;"> <div class="readList-title">java环境变量设置</div> <div class="readList-tips"> <span class="readList-date">2025-09-07</span> </div> </div> </a> <a href="/news/251156.html" title="店铺转让费怎么谈比较合理(商铺转让费的五大谈判技巧)" class="readList-item"> <img class="readList-item-l" src="/static/default/styles/imgs/124.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/255263.html" title="短视频素材哪里找(20个自媒体人必备的素材库分享)" class="readList-item"> <img class="readList-item-l" src="/static/default/styles/imgs/16.jpg" alt="短视频素材哪里找(20个自媒体人必备的素材库分享)"> <div class="readList-item-r" style="width: 197px;"> <div class="readList-title">短视频素材哪里找(20个自媒体人必备的素材库分享)</div> <div class="readList-tips"> <span class="readList-date">2025-09-07</span> </div> </div> </a> <a href="/news/213612.html" title="phpstorm怎样运行php文件" class="readList-item"> <img class="readList-item-l" src="/static/default/styles/imgs/154.jpg" alt="phpstorm怎样运行php文件"> <div class="readList-item-r" style="width: 197px;"> <div class="readList-title">phpstorm怎样运行php文件</div> <div class="readList-tips"> <span class="readList-date">2025-09-07</span> </div> </div> </a> <a href="/news/257145.html" title="洗衣机哪个牌子好?质量好性价比高?" class="readList-item"> <img class="readList-item-l" src="/static/default/styles/imgs/143.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/239752.html" title="如何优化您的手机网站" class="readList-item"> <img class="readList-item-l" src="/static/default/styles/imgs/90.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/209067.html" title="2021计算机二级office用的是哪个版本" class="readList-item"> <img class="readList-item-l" src="/static/default/styles/imgs/62.jpg" alt="2021计算机二级office用的是哪个版本"> <div class="readList-item-r" style="width: 197px;"> <div class="readList-title">2021计算机二级office用的是哪个版本</div> <div class="readList-tips"> <span class="readList-date">2025-09-07</span> </div> </div> </a> <a href="/news/217781.html" title="外链优化过度怎么办?" class="readList-item"> <img class="readList-item-l" src="/static/default/styles/imgs/170.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/255166.html" title="淘宝淘龄在哪里看(手机查看淘龄的详细教程)" class="readList-item"> <img class="readList-item-l" src="/static/default/styles/imgs/236.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/238293.html" title="SEO优化的技能是什么?" class="readList-item"> <img class="readList-item-l" src="/static/default/styles/imgs/83.jpg" alt="SEO优化的技能是什么?"> <div class="readList-item-r" style="width: 197px;"> <div class="readList-title">SEO优化的技能是什么?</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="/tags/117536.html" title="云服务" class="hotList left">云服务</a> <a href="/tags/117535.html" title="redsn0w" class="hotList left">redsn0w</a> <a href="/tags/117534.html" title="印有" class="hotList left">印有</a> <a href="/tags/117533.html" title="好既" class="hotList left">好既</a> <a href="/tags/117532.html" title="看哪" class="hotList left">看哪</a> <a href="/tags/117531.html" title="看此" class="hotList left">看此</a> <a href="/tags/117530.html" title="复工率" class="hotList left">复工率</a> <a href="/tags/117529.html" title="降薪" class="hotList left">降薪</a> <a href="/tags/117528.html" title="自愿" class="hotList left">自愿</a> <a href="/tags/117527.html" title="画作" class="hotList left">画作</a> <a href="/tags/117526.html" title="媲美" class="hotList left">媲美</a> <a href="/tags/117525.html" 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/244770.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/182726.html" class="question-list-item text2" title="淘宝双12活动没了是真的吗 淘宝双十二之后还有什么优惠活动"> <span class="question-list-item-dot"></span> <span class="list-item-text text2">淘宝双12活动没了是真的吗 淘宝双十二之后还有什么优惠活动</span> </a> <a href="/news/227791.html" class="question-list-item text2" title="COUGAR是什么"> <span class="question-list-item-dot"></span> <span class="list-item-text text2">COUGAR是什么</span> </a> <a href="/news/235234.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/206842.html" class="question-list-item text2" title="win10有几个版本"> <span class="question-list-item-dot"></span> <span class="list-item-text text2">win10有几个版本</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>