標籤彙整:show

jQuery 收合選單:show(), hide(), toggle()

show()

顯示指定物件,等於在該物件添加display: none屬性

ul
 li
  div.problem PROBLEM A
  div.ans ANSWER A
 li
  div.problem PROBLEM B
  div.ans ANSWER B
 li
  div.problem PROBLEM C
  div.ans ANSWER C
 li
  div.problem PROBLEM D
  div.ans ANSWER D
ul
 display: inline-block  
li
 display: block
 margin: 10px   

.problem
 padding: 10px 15px 10px 15px
 background-color: #90a955
 color: #fff    
.ans
 padding: 15px
 background-color: #ebf9de
 display: none
$("li").click(
 function() {
  //find往下找子元素
  //show顯示指定物件
  $(this).find(".ans").show();
 }
);

hide()

隱藏指定物件,在元素添加display: none屬性

功能介紹:改編上一個範例:點開任一PROBLEM後,點選其他PROBLEM會産生

  1. 原ANSWER收合
  2. 新ANSWER展開

撰寫方法:命令系統在每次點擊時執行

  1. 收合所有ANSWER
  2. 展開指定ASNWER
//HTML與CSS跟上例相同
$("li").click(
 function() {
  //1 hide 收合所有ANSWER
  $(".ans").hide();
  //2 show 顯示指定PROBLEM
  $(this).find(".ans").show();
 }
);

toggle()

像電燈般開闔物件

效果:

  1. 點擊PROBLEM,開啓ANSWER
  2. 再點擊一次該PROBLEM,關閉ANSWER
//HTML與CSS跟上例相同
$("li").click(
 function() {
  //toggle 像電燈般開闔物件
  $(this).find(".ans").toggle();
 }
);