因为太久没更新了,所以来放一点没意思的内容。
做的是jQuery框架的隐藏和显示,HTML如下:
<ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li class="hide">5</li> <li class="hide">6</li> <li class="hide">7</li> <li>8</li> <a href="#" onclick="fun()">more</a> </ul>
Javascript:
var vis=false; $(".hide").hide(); function fun(){ if(vis==false) { $(".hide").show(); $("a").html("less"); vis=!vis; } else { $(".hide").hide(); $("a").html("more"); vis=!vis; } }
首先设定一个布尔量vis表示目前是否已经显示,然后在函数里写一个分支,调用show(), hide()两个函数进行操作,另外还要把链接的html更改一下,vis取反。
后来翻了一下资料,有一个叫toggle()的函数,是用来切换show和hide的,这样直接用一个函数就能完成操作了。
而toggle()的实质是更改style的display属性,所以直接利用display来判断的话,可以将vis变量也节省掉。
更新的JS代码如下:
$(".hide").hide(); function fun(){ if($(".hide").css("display")=="none") { $(".hide").show(); $("a").html("less"); } else { $(".hide").hide(); $("a").html("more"); } }