實作餐廳網站 FAQ 頁面


Posted by Nicolakacha on 2020-09-06

這次主要運用少量的 JavaScript 操控 DOM 元素並搭配預先設置好的 class 來實作

成品 DEMO

每個問題都有一個 data-id 的自定義 attribute 之後用來選取使用

  <div class="group" data-id="0">
    <div class="question">
      <div>Q1:</div>
      <div class="question__text">請問團體用餐可以併桌嗎?</div>
    </div>
  </div>

用 JavaScript 去監聽點擊事件,點到的時候我們把 target 設為最靠近的 group 的 data-id,用這個 data-id 去讓對應的 answer 來 toggle(若有則變無,若無則變有)一個叫做 hide 的 class

<script>
  document.addEventListener("DOMContentLoaded", function () {
    const questions = document.querySelector(".questions");
    questions.addEventListener("click", function (e) {
      let target = e.target.closest(".group").getAttribute("data-id");
      document
        .querySelectorAll(".answer")
        [target].classList.toggle("hide");
    });
  });
</script>

而這個 .hide 的 class 其實就只是改變 display 變成 none 而已,這樣就完成了點擊顯示或隱藏的功能啦!

  .hide {
    display: none;
  }

#DOM #javascript #css







Related Posts

Git cherry pick 實戰: 作業分支混到 master commit,但又不想洗掉自己作業的 commit 要怎麼辦?

Git cherry pick 實戰: 作業分支混到 master commit,但又不想洗掉自己作業的 commit 要怎麼辦?

[Day 01] 單例模式及簡單工廠設計模式

[Day 01] 單例模式及簡單工廠設計模式

[Week6] CSS 選取器:全域選擇器、:nth-child()

[Week6] CSS 選取器:全域選擇器、:nth-child()


Comments