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();
 }
);
Display
  • PROBLEM A
    ANSWER A
  • PROBLEM B
    ANSWER B
  • PROBLEM C
    ANSWER C
  • PROBLEM D
    ANSWER D

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();
 }
);
Display
  • PROBLEM A
    ANSWER A
  • PROBLEM B
    ANSWER B
  • PROBLEM C
    ANSWER C
  • PROBLEM D
    ANSWER D

toggle()

像電燈般開闔物件

效果:

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

2 Replies to “jQuery 收合選單:show(), hide(), toggle()”

  1. Ian您好:
    我想要使用第二種方式:點開任一PROBLEM後,點選其他PROBLEM會産生
    但不知道語法哪裡有誤,ans一直出不來,無法秀出來,可以請你幫我看看嗎?
    麻煩你了,謝謝。

    無標題文件

    $(“li”).click(
    function() {
    //find往下找子元素
    //show顯示指定物件
    $(this).find(“.ans”).show();
    }
    );

    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;}

    PROBLEM A

    ANSWER A

    PROBLEM B

    ANSWER B

    PROBLEM C

    ANSWER C

    PROBLEM D

    ANSWER D

    1. HI 您好

      請把【“】的地方全部置換成【’】或是【”】,再試試看。
      注意要記得引入jQuery的函示庫喔。
      其他地方沒有問題。

Leave a Reply

Your email address will not be published. Required fields are marked *