Rumah > hujung hadapan web > tutorial js > 浅析jquery中的toggle与slideToggle的区别

浅析jquery中的toggle与slideToggle的区别

巴扎黑
Lepaskan: 2017-06-30 11:16:53
asal
1489 orang telah melayarinya

 jQuery中的

toggle和slideToggle 方法,都可以实现对一个元素的显示和隐藏。强大啊~

区别是:

toggle:动态效果为从右至左。横向动作。

slideToggle:动态效果从下至上。竖向动作。

so,比如想实现一个树由下至上收缩的动态效果,就使用slideToggle就ok了。

此外,toggle和slideToggle 还有一些参数可以设置,具体看jQuery的API就可以了~

 

toggle的用法:

<SCRIPT src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></SCRIPT>
<SCRIPT LANGUAGE="
JavaScript
">
$(function(){
 $("#z").toggle(
    function(){
     alert(1);
    },
    function(){
     alert(2);
    },
    function(){
     alert(3);
    }
 );
 $("#x").click(function(){
  $("#z").toggle(
    function(){
     alert(1);
    },
    function(){
     alert(2);
    },
    function(){
     alert(3);
    }
  );
 });
})
</SCRIPT>
<p style="
width
:100px; 
height
:100px; 
background-color
:red;" id="z"></p>
<p style="width:100px; height:100px; background-color:blue;" id="x"></p>
Salin selepas log masuk

slideToggle的用法:

 <title></title>
    <script src="jquery-1.9.1.js" type="text/javascript"></script>
    <style type="text/css">
        .imgclass
        {
            width: 300px;
            height: 300px;
            border: solid 1px red;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            $(&#39;#Button1&#39;).bind(&#39;click&#39;, function () {
                $(&#39;img&#39;).slideUp(2000);
            });
            $(&#39;#Button2&#39;).bind(&#39;click&#39;, function () {
                $(&#39;img&#39;).slideDown(2000);
            });
            $(&#39;#Button3&#39;).bind(&#39;click&#39;, function () {
                $(&#39;img&#39;).slideToggle(2000);
            })
        })
    </script>
</head>
<body>
    <p>
        <p>
            <input id="Button1" type="button" value="上拉" /><input id="Button2" type="button"
                value="下拉" /><input id="Button3" type="button" value="自动上拉下拉" /></p>
        <p>
            <img alt="" src="images/1.jpg" class="imgclass" /></p>
    </p>
</body>
Salin selepas log masuk

Atas ialah kandungan terperinci 浅析jquery中的toggle与slideToggle的区别. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan