提姆寫程式

0%

jQuery 筆記 - 常用的收闔問題選單

發表於 分類於 Disqus：
一些問答區制式的選單收闔設計

question

這次紀錄許多網頁會做的制式問題收闔效果選單，直接看程式碼：

HTML 架構

共有三個 <div> 標籤裡頭放了問題跟回覆文字，標題部分如果要讓 SEO 搜尋方便，加上 h2 標籤是不錯的技巧。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div class="wrap">
  <div class="questionList">
    <div class="question">
      <h2>領域大會，好友竟然。</h2>
      <p>並不是事故，股份有限公司，男生諾基亞漂。</p>
    </div>

    <div class="question">
      <h2>錯誤農業改造，立刻表情，您可以採取，時。</h2>
      <p>所有人傢俱韓國一半，環境保存不能下載眼神，國務院對付權力休。</p>
    </div>

    <div class="question">
      <h2>女孩反正表演相應大家，戀愛如。</h2>
      <p>
        不能照顧也可輕鬆逐漸效率故事機場百度，權益精靈回頭瀏覽醫療激動一年，大門完成所。
      </p>
    </div>
  </div>
</div>

CSS 樣式

顏色部分因為有做變數，所以可以再看 codepen，然而最重要，也是這篇練習最長的一個樣式，最需要注意的地方是在 .question 的這個地方，可以看到的是我要在 h2 上有行為( hover 跟 active)，所已是要加在這裡，而不是加在 .question 上，原因 .question 會包含到 p 元素，但那並不是我要做的效果。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.question {
  h2 {
    color: $primary;
    border: 1px solid $primary;
    padding: 10px 5px;
    margin-bottom: 10px;
    margin-top: 10px;
    &:hover {
      background-color: $primary; // hover 效果背景換色
      color: $white; //hover 效果字體換色
    }
    &.active {
      p {
        display: block; //點擊 h2 後顯示
      }
    }
  }
  p {
    display: none; //預設畫面為隱藏
    line-height: 1.5;
  }
}

jQuery 行為

步驟寫於下方註解。

1
2
3
4
5
6
7
8
9
10
11
$(".question h2").click(function (e) {
  e.preventDefault();
  //在 h2 上動態新增 class
  $(this).toggleClass("active");
  //h2 在父層元素中，找到 p 元素，並且給它滑動效果
  $(this).parent().find("p").slideToggle();
  //h2 在父層 .question 元素中，找到其他 .question 同層元素，再找到該同層元素的 p 標籤，並向上收闔
  $(this).parent().siblings().find("p").slideUp();
  //h2 在父層 .question 元素中，找到其他 .question 同層元素，再找到該同層元素的 h2 標籤，並動態移除 class
  $(this).parent().siblings().find("h2").removeClass("active");
});

參考資料：