jQuery中如何实现toggle方法

来源：动视网责编：小采时间：2020-11-27 15:06:22

jQuery中如何实现toggle方法

jQuery中如何实现toggle方法:这次给大家带来jQuery中如何实现toggle方法，使用jQuery中的toggle方法注意事项有哪些，下面就是实战案例，一起来看一下。我们知道使用 jQuery 来实现上下移入移除，可以直接使用 slideUp() 和 slideDown() 方法。slideUp()方法和slideDo

推荐度：

点击下载本文 文档为doc格式

导读jQuery中如何实现toggle方法:这次给大家带来jQuery中如何实现toggle方法，使用jQuery中的toggle方法注意事项有哪些，下面就是实战案例，一起来看一下。我们知道使用 jQuery 来实现上下移入移除，可以直接使用 slideUp() 和 slideDown() 方法。slideUp()方法和slideDo

这次给大家带来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>

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

jQuery中如何实现toggle方法

推荐度：

点击下载本文 文档为doc格式

标签：方法方法如何 jQuery

热门焦点

jQuery中如何实现toggle方法

jQuery中如何实现toggle方法

jQuery中如何实现toggle方法

最新推荐

猜你喜欢

热门推荐