jquery中的toggle与slideToggle的区别

2025-10-26
网站建设限时活动促销

 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 lj-v931"> <a href="/news/213061.html" class="articles_page_l lj-ym3w" title="CSS实现透明度变化的动画 (淡入淡出效果)"> <div class="articles_page_l_btn lj-hprp"> <img class="btn_icon lj-h4md" style="margin-right:5px;" src="/static/default/styles/images/icon_pre.png" alt="CSS实现透明度变化的动画 (淡入淡出效果)"> <span class="btn_text lj-bkl0">上一篇</span> </div> <div class="articles_page_l_text lj-kheb">CSS实现透明度变化的动画 (淡入淡出效果)</div> </a> <a href="/news/213063.html" class="articles_page_r lj-0sih" title="所有的vb的变量类型"> <div class="articles_page_r_btn lj-r8fj" > <span class="btn_text lj-qf91">下一篇</span> <img class="btn_icon lj-qvn0" style="margin-left:5px;" src="/static/default/styles/images/icon-next.png" alt="所有的vb的变量类型"> </div> <div class="articles_page_r_text lj-9s9h" >所有的vb的变量类型</div> </a> </div> <div class="recommArticle lj-vzbi"> <div class="preArtTitle clearfix lj-glsg" > <h2 class="title lj-2d2t">文章推荐</h2> </div> <div> <div class="recArticleItems clearfix lj-ang6"> <div class="articleItem lj-yf3u"> <a href="/news/213062.html" title="jquery中的toggle与slideToggle的区别"> <div class="articleItemTop lj-czps"> <img class="articleItemImg lj-o0m2" src="/static/default/styles/imgs/67.jpg" alt="jquery中的toggle与slideToggle的区别"> <div class="viewNum lj-ujls"> <img class="viewNumIcon lj-3agl" src="/static/default/styles/images/lookIcon.png" alt="jquery中的toggle与slideToggle的区别"> <span class="tipViewNum lj-msyb">195</span> </div> </div> <div class="articleItemInfo lj-8b3b"> <div class="articleItemText lj-qs63">jquery中的toggle与slideToggle的区别</div> <div class="articleItemBottomInfo lj-1hia"> <span class="articleItemBottomTip lj-yaxh">2025-10-26</span> </div> </div> </a> </div> <div class="articleItem lj-fnpl"> <a href="/news/207329.html" title="slideToggle+slideup实现手机端折叠菜单效果实例代码"> <div class="articleItemTop lj-jaup"> <img class="articleItemImg lj-l4lw" src="/static/default/styles/imgs/101.jpg" alt="slideToggle+slideup实现手机端折叠菜单效果实例代码"> <div class="viewNum lj-2qa6"> <img class="viewNumIcon lj-520m" src="/static/default/styles/images/lookIcon.png" alt="slideToggle+slideup实现手机端折叠菜单效果实例代码"> <span class="tipViewNum lj-tvtp">8236</span> </div> </div> <div class="articleItemInfo lj-ffd9"> <div class="articleItemText lj-ih19">slideToggle+slideup实现手机端折叠菜单效果实例代码</div> <div class="articleItemBottomInfo lj-necx"> <span class="articleItemBottomTip lj-ja9x">2025-10-26</span> </div> </div> </a> </div> </div> </div></div> </div> <div class="right contentRight lj-d8w3" style="position:relative;"> <div class="recommRead lj-tx3v"> <div class="recommReadTitle yellowafter lj-m4wr" > <h2>推荐阅读</h2> </div> <div class="readList lj-9hg9"> <a href="/news/246789.html" title="如何善用对比度来提升网页内容的可读性" class="readList-item lj-uqkt"> <img class="readList-item-l lj-c43g" src="/static/default/styles/imgs/100.jpg" alt="如何善用对比度来提升网页内容的可读性"> <div class="readList-item-r lj-gir0" style="width: 197px;"> <div class="readList-title lj-v1l8">如何善用对比度来提升网页内容的可读性</div> <div class="readList-tips lj-j4dd"> <span class="readList-date lj-nwdp">2025-10-26</span> </div> </div> </a> <a href="/news/196114.html" title="网络服务器多少钱一台" class="readList-item lj-blab"> <img class="readList-item-l lj-nis9" src="/static/default/styles/imgs/199.jpg" alt="网络服务器多少钱一台"> <div class="readList-item-r lj-jdpa" style="width: 197px;"> <div class="readList-title lj-akr4">网络服务器多少钱一台</div> <div class="readList-tips lj-pkpz"> <span class="readList-date lj-q0pi">2025-10-26</span> </div> </div> </a> <a href="/news/185109.html" title="免费个人主页申请程序" class="readList-item lj-chu5"> <img class="readList-item-l lj-63sm" src="/static/default/styles/imgs/21.jpg" alt="免费个人主页申请程序"> <div class="readList-item-r lj-5c9k" style="width: 197px;"> <div class="readList-title lj-phnv">免费个人主页申请程序</div> <div class="readList-tips lj-kq17"> <span class="readList-date lj-dmkk">2025-10-26</span> </div> </div> </a> <a href="/news/184871.html" title="伊莱克斯浴霸怎么样 伊莱克斯浴霸品牌及优点介绍【评测】" class="readList-item lj-pyi0"> <img class="readList-item-l lj-yokc" src="/static/default/styles/imgs/141.jpg" alt="伊莱克斯浴霸怎么样 伊莱克斯浴霸品牌及优点介绍【评测】"> <div class="readList-item-r lj-s743" style="width: 197px;"> <div class="readList-title lj-fuz2">伊莱克斯浴霸怎么样 伊莱克斯浴霸品牌及优点介绍【评测】</div> <div class="readList-tips lj-zxwk"> <span class="readList-date lj-g3nf">2025-10-26</span> </div> </div> </a> <a href="/news/255796.html" title="双十一预售和当天哪个便宜,怎么买比较划算?" class="readList-item lj-pjla"> <img class="readList-item-l lj-ql2b" src="/static/default/styles/imgs/204.jpg" alt="双十一预售和当天哪个便宜,怎么买比较划算?"> <div class="readList-item-r lj-x1xu" style="width: 197px;"> <div class="readList-title lj-oyq7">双十一预售和当天哪个便宜,怎么买比较划算?</div> <div class="readList-tips lj-jlxu"> <span class="readList-date lj-3gyb">2025-10-26</span> </div> </div> </a> <a href="/news/188039.html" title="重庆虚拟实境科技有限公司" class="readList-item lj-rw9t"> <img class="readList-item-l lj-z19w" src="/static/default/styles/imgs/18.jpg" alt="重庆虚拟实境科技有限公司"> <div class="readList-item-r lj-x1xu" style="width: 197px;"> <div class="readList-title lj-oyq7">重庆虚拟实境科技有限公司</div> <div class="readList-tips lj-jlxu"> <span class="readList-date lj-3gyb">2025-10-26</span> </div> </div> </a> <a href="/news/243612.html" title="做网站找哪家" class="readList-item lj-rw9t"> <img class="readList-item-l lj-z19w" src="/static/default/styles/imgs/142.jpg" alt="做网站找哪家"> <div class="readList-item-r lj-x1xu" style="width: 197px;"> <div class="readList-title lj-oyq7">做网站找哪家</div> <div class="readList-tips lj-jlxu"> <span class="readList-date lj-3gyb">2025-10-26</span> </div> </div> </a> <a href="/news/176588.html" title="歪歪如何设置鲜花" class="readList-item lj-rw9t"> <img class="readList-item-l lj-z19w" src="/static/default/styles/imgs/82.jpg" alt="歪歪如何设置鲜花"> <div class="readList-item-r lj-x1xu" style="width: 197px;"> <div class="readList-title lj-oyq7">歪歪如何设置鲜花</div> <div class="readList-tips lj-jlxu"> <span class="readList-date lj-3gyb">2025-10-26</span> </div> </div> </a> <a href="/news/173548.html" title="wma是什么文件格式? wma文件怎么打开?" class="readList-item lj-rw9t"> <img class="readList-item-l lj-z19w" src="/static/default/styles/imgs/18.jpg" alt="wma是什么文件格式? wma文件怎么打开?"> <div class="readList-item-r lj-x1xu" style="width: 197px;"> <div class="readList-title lj-oyq7">wma是什么文件格式? wma文件怎么打开?</div> <div class="readList-tips lj-jlxu"> <span class="readList-date lj-3gyb">2025-10-26</span> </div> </div> </a> <a href="/news/240628.html" title="来山区网站建设业务" class="readList-item lj-rw9t"> <img class="readList-item-l lj-z19w" src="/static/default/styles/imgs/28.jpg" alt="来山区网站建设业务"> <div class="readList-item-r lj-x1xu" style="width: 197px;"> <div class="readList-title lj-oyq7">来山区网站建设业务</div> <div class="readList-tips lj-jlxu"> <span class="readList-date lj-3gyb">2025-10-26</span> </div> </div> </a> </div></div><div class="hotTag lj-jfp4" style="margin-bottom: 12px;"> <h2 class="hotFindTitle yellowafter lj-pt62" style="line-height:normal;padding-left:16px;font-size:20px;">热门标签</h2> <div class="hotFindList clearfix lj-7ezr"> <a href="/tags/65536.html" title="电脑任务栏颜色怎么调" class="hotList left lj-7lq5">电脑任务栏颜色怎么调</a> <a href="/tags/131072.html" title="黑龙茶官网" class="hotList left lj-7lq5">黑龙茶官网</a> <a href="/tags/256.html" title="喵触" class="hotList left lj-7lq5">喵触</a> <a href="/tags/65792.html" title="微信小程序游戏怎么在电脑上玩" class="hotList left lj-7lq5">微信小程序游戏怎么在电脑上玩</a> <a href="/tags/131328.html" title="模板王" class="hotList left lj-7lq5">模板王</a> <a href="/tags/66048.html" title="webview是什么意思" class="hotList left lj-7lq5">webview是什么意思</a> <a href="/tags/131584.html" title="沛县人才网" class="hotList left lj-7lq5">沛县人才网</a> <a href="/tags/66304.html" title="excel中格式刷怎么用" class="hotList left lj-7lq5">excel中格式刷怎么用</a> <a href="/tags/131840.html" title="火爆招商网" class="hotList left lj-7lq5">火爆招商网</a> <a href="/tags/1024.html" title="竞价广告哪个平台好" class="hotList left lj-7lq5">竞价广告哪个平台好</a> <a href="/tags/66560.html" title="token" class="hotList left lj-7lq5">token</a> <a href="/tags/132096.html" title="亲和力旅行社官网" class="hotList left lj-7lq5">亲和力旅行社官网</a> </div></div><div class="new-question lj-uvyr"> <div class="recommReadTitle yellowafter lj-838s" > <h2>推荐百科</h2> <a class="lookMore lj-c159" href="/c/67.html" title="推荐百科">查看更多</a> </div> <div class="question-list lj-8nqu"> <a href="/news/247312.html" class="question-list-item text2 lj-x9rx" title="在做电商类网站建设时海报如何设计更吸引人呢?"> <span class="question-list-item-dot lj-n78n"></span> <span class="list-item-text text2 lj-afgw">在做电商类网站建设时海报如何设计更吸引人呢?</span> </a> <a href="/news/170185.html" class="question-list-item text2 lj-x9rx" title="电脑总提示出现问题需要重新启动怎么办"> <span class="question-list-item-dot lj-n78n"></span> <span class="list-item-text text2 lj-afgw">电脑总提示出现问题需要重新启动怎么办</span> </a> <a href="/news/201423.html" class="question-list-item text2 lj-x9rx" title="plc编程用什么平板电脑"> <span class="question-list-item-dot lj-n78n"></span> <span class="list-item-text text2 lj-afgw">plc编程用什么平板电脑</span> </a> <a href="/news/170451.html" class="question-list-item text2 lj-x9rx" title="免费b站在线观看人数在哪 免费b站在线观看人数位置"> <span class="question-list-item-dot lj-n78n"></span> <span class="list-item-text text2 lj-afgw">免费b站在线观看人数在哪 免费b站在线观看人数位置</span> </a> <a href="/news/199671.html" class="question-list-item text2 lj-x9rx" title="上位机编程用什么软件"> <span class="question-list-item-dot lj-v9pp"></span> <span class="list-item-text text2 lj-dwfl">上位机编程用什么软件</span> </a> </div></div><div class="hotTag lj-7tl3" style="margin-bottom: 12px;"> <h2 class="hotFindTitle yellowafter lj-ao61" style="line-height:normal;padding-left:16px;font-size:20px;">友情链接</h2> <div class="hotFindList clearfix lj-5ftw"> <a href="https://www.cloudinto.cn/" title="支点网络" class="hotList left lj-yz3y">支点网络</a> <a href="https://www.join-mu.com/" title="上海江木" class="hotList left lj-yz3y">上海江木</a> </div></div> </div></div></div><div class="footer mobileHide lj-w9ry"> <div class="footerLi lj-v2gk"> <div class="container footerBottom lj-phyv"> <p> <span>Powered by CLOUDINTO PTE. LTD. © 2010-2025 有料笔记 </span> <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow" title=""></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>