- $(selected).toggle()事件 會自動獲得目前對象的顯示或者隐藏狀态,并且使用觸發事件進行切換。
- 在元素的click事件中綁定兩個或兩個以上的函數 toggle不像bind需要在後面添加"click"來綁定click觸發事件,toggle本身就是click觸發的(而且隻能click觸發)。
- jquery 中toggle的2種用法
一、在元素的click事件中綁定兩個或兩個以上的函數 toggle不像bind需要在後面添加"click"來綁定click觸發事件,toggle本身就是click觸發的(而且隻能click觸發),如下執行個體:
<input id="btntest" type="button" value="點一下我" />
<div>我是動态顯示的</div>
<script type="text/javascript">
$(function () {
$("#btntest")
$("#btntest").toggle(
function(){
$("div").html("我變了!");
},
function(){
$("div").html("我又變了!");
});
});
</script>
二、切換元素的顯示與隐藏效果:
<input id="btntest" type="button" value="點一下我" />
<div>我是動态顯示的</div>
<script type="text/javascript">
$(function () {
$("#btntest").bind("click",function(){
$("div").toggle(500);//此處的 500 是隐藏顯示的延遲時間,預設為0,也可以用"slow","normal"或"fast"
//如果裡面的值為true(toggle(true))時隻能顯示元素,值為false(toggle(false))時隻能隐藏元素。
) }) });
</script>
- 舉例
<script type="text/javascript">
$(function(){
$(".b").click(function(){
var value = $(this).val();
$("td[rowspan!=13] "+value).toggle(500);
});
});
</script>
- 注意:
-
$("td[rowspan!=13] 後面有一個空格,表示層級選擇器,
意思是擷取 滿足rowspan屬性的屬性值不為13的td元素下的所有元素
- +value是指把前面的篩選了的元素(是個字元串)加上value變為更長的字元串,代表的值才能供toggle使用
- 如果沒有出錯,toggle(500)表示在顯示與隐藏之間來回切換,生效時間是500毫秒
- submit會把元素選中,因為在一些浏覽器中,元素的type預設值是submit,是以會選中它。