脚本宝典收集整理的这篇文章主要介绍了jQuery中如何实现toggle方法，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。这次给大家带来jquery中如何实现toggle方法，使用jQuery中的toggle方法注意事项有哪些，下面就是实战案例，一起来看一下。
我们知道使用 jQuery 来实现上下移入移除，可以直接使用 slideUp() 和 slideDown() 方法。
slideUp()方法和slideDown()方法只会改变元素的高度。如果一个元素的 display 属性值为 “none”，当调用 slideDown() 方法时，这个元素将由上至下延伸显示。slideUp()方法正好相反，元素将由上到下缩短隐藏。
代码如下：
<!DOCTYPE htML> <html lang="en"> <head> <;meta charset="UTF-8"> <tITle>toggle-jquery1.9</title> <script src="https://cdn.bootcss.COM/jquery/1.9.0/jquery.min.js"></script> <style> p.container { height: 320px; border: 1px solid #ccc; } p.left { width: 200px; height: 300px; background-color: #36f; } </style> </head> <body> <p class="container"> <p class="left"></p> </p> <button id="toggle">toggle</button> <script> $(document).ready(function(){ $('#toggle').click(function(){ $('.left').slideToggle(300); }); }); </script> </body> </html>
那么，要实现左右的滑入滑出呢？
demo 如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>toggle-jquery1.9</title>
<script src="https://cdn.bootcss.com/jquery/1.9.0/jquery.min.js"></script>
<style>
p.container {
height: 320px;
border: 1px solid #ccc;
}
p.left {
width: 200px;
height: 300px;
background-color: #36f;
}
</style>
</head>
<body>
<p class="container">
<p class="left"></p>
</p>
<button id="toggle">toggle</button>
<script>
$(document).ready(function(){
$('#toggle').click(function(){
$('.left').aniMATE({width:'toggle'},350);
});
});
</script>
</body>
</html>相信看了本文案例你已经掌握了方法，更多精彩请关注脚本宝典其它相关文章！
推荐阅读：
jquery中select组件的使用方法
如何实现jquery回车登录效果
jQuery自定义函数应用以及解析
鼠标移出事件的案例以及详解
以上就是jQuery中如何实现toggle方法的详细内容，更多请关注脚本宝典其它相关文章！
以上是脚本宝典为你收集整理的jQuery中如何实现toggle方法全部内容，希望文章能够帮你解决jQuery中如何实现toggle方法所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。