jQuery中如何实现toggle方法


本文摘自PHP中文网,作者php中世界最好的语言,侵删。

这次给大家带来jQuery中如何实现toggle方法,使用jQuery中的toggle方法注意事项有哪些,下面就是实战案例,一起来看一下。

我们知道使用 jQuery 来实现上下移入移除,可以直接使用 slideUp() 和 slideDown() 方法。

slideUp()方法和slideDown()方法只会改变元素的高度。如果一个元素的 display 属性值为 “none”,当调用 slideDown() 方法时,这个元素将由上至下延伸显示。slideUp()方法正好相反,元素将由上到下缩短隐藏。

代码如下:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

<!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 如下:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

<!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>

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

jquery中select组件的使用方法

如何实现jquery回车登录效果

jQuery自定义函数应用以及解析

鼠标移出事件的案例以及详解

以上就是jQuery中如何实现toggle方法的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

jquery怎么判断元素是否有某个属性

jquery append()方法怎么用

jquery怎么遍历json数组

jquery如何判断滚动条是否到底部

jquery中怎么修改css样式

jquery怎么移除css样式

jquery如何判断输入框是否为空

7种jquery $()函数的使用方法(总结)

集成ueditor富文本编辑器的方法

jquery判断是否包含指定字符串

更多相关阅读请进入《toggle》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...