我們的電腦屏幕大小是固定的，那麼如何在有限的空間放更多的內容呢？
我們應該給用戶足夠的選擇權，當他們想要看某些內容的時候可以很快的看到，不想看的時候就把他隱藏。於是就有了題目說的這個問題。
其實這個問題很簡單，那麼，之所以拿出來跟大家分享，一方面我們大家相互交流，另一方面，也是對自己的學習的一種總結。
這裡我想到了兩種方法，給大家分享一下。
好了不多說，下面看代碼：
第一種，是常規的方法：
[javascript]
. 代碼如下:
$(function(){
var images = ['images/up.png', 'images/down.png']
$(img).onClick(function(){
if($(img).attr("class")=="up"){
$(img).attr("src",images[1]);
$(img).removeClass();
}else{
$(img).attr("src",images[0]);
$(img).addClass("up");
}
});
})
<img src="images/up.png" class="up">
$(function(){
var images = ['images/up.png', 'images/down.png']
$(img).onClick(function(){
if($(img).attr("class")=="up"){
$(img).attr("src",images[1]);
$(img).removeClass();
}else{
$(img).attr("src",images[0]);
$(img).addClass("up");
}
});
})
<img src="images/up.png" class="up">
這裡主要是給圖片控件注冊一個點擊事件，點擊的時候添加CSS控制(css主要設置是否顯示某部分內容)，同時更換圖片。
第二種方法：使用arguments.callee.em ^= 1自動選擇數組參數 [javascript]
. 代碼如下:
functionchangeimg() {
//換圖片
var images = ['images/up.png','images/down.png']
var imgupdown =document.getElementById("hideimg");
imgupdown.src = images[arguments.callee.em^= 1];
//隱藏下方的div
var content =$(".hidecontent");
//根據display屬性判斷該進行的操作
if (content.css("display")!= "none") {
content.slideUp("slow");
} else {
content.slideDown("slow"); ;
}
}
functionchangeimg() {
//換圖片
var images = ['images/up.png','images/down.png']
var imgupdown =document.getElementById("hideimg");
imgupdown.src = images[arguments.callee.em^= 1];
//隱藏下方的div
var content =$(".hidecontent");
//根據display屬性判斷該進行的操作
if (content.css("display")!= "none") {
content.slideUp("slow");
} else {
content.slideDown("slow"); ;
}
}
這裡將圖片地址放到了一個數組中，異或運算，自動選擇數組參數，實現圖片的切換。
內容的隱藏顯示，則使用了.css屬性。
下面是效果圖：（待補充）