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方法的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！