jquery里面的toggle的使用方法:1、在元素的click事件中綁定兩個(gè)或兩個(gè)以上的函數(shù),oggle本身就是click觸發(fā)的;2、實(shí)現(xiàn)切換元素的顯示與隱藏效果。
本教程操作環(huán)境:windows7系統(tǒng)、jquery3.2.1版本,該方法適用于所有品牌電腦。
推薦:jquery視頻教程
jquery里面的toggle的使用方法:
一、在元素的click事件中綁定兩個(gè)或兩個(gè)以上的函數(shù) toggle不像bind需要在后面添加"click"來綁定click觸發(fā)事件,toggle本身就是click觸發(fā)的(而且只能click觸發(fā)),如下實(shí)例:
<input id="btntest" type="button" value="點(diǎn)一下我" /> <div>我是動(dòng)態(tài)顯示的</div> <script type="text/javascript"> $(function () { $("#btntest") $("#btntest").toggle( function(){ $("div").html("我變了!"); }, function(){ $("div").html("我又變了!"); }); }); </script>
二、切換元素的顯示與隱藏效果:
<input id="btntest" type="button" value="點(diǎn)一下我" /> <div>我是動(dòng)態(tài)顯示的</div> <script type="text/javascript"> $(function () { $("#btntest").bind("click",function(){ $("div").toggle(500);//此處的 500 是隱藏顯示的延遲時(shí)間,默認(rèn)為0,也可以用"slow","normal"或"fast" //如果里面的值為true(toggle(true))時(shí)只能顯示元素,值為false(toggle(false))時(shí)只能隱藏元素。 ) }) }); </script>
相關(guān)學(xué)習(xí)推薦:js視頻教程