Q&A

功能說明

  • 每個Q&A方格都有 :
    1. 問題
    2. 回答
    3. 開啟按鈕
    4. 關閉按鈕

HTML重點

  1. 主框架 : 

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <section class="questions">

        <!-- 標題 -->
        <div class="title">
            <h2>general questions</h2>
        </div>
        
        <!-- Q&A -->
        <div class="section-center">
          <!-- ...詳細內容... -->
        </div>
    </section>

  2. 單一Q&A方格 : 

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    <!-- 單一QA -->
        <article class="question">
        
            <!-- 問題區域 -->
            <div class="question-title">
                <p>Question.....</p>
                <!-- 按鈕 -->
                <button type="button" class="question-btn">
                    <!-- 開啟按鈕 -->
                    <span class="plus-icon">
                        <i class="far fa-plus-square"></i>
                    <!-- 關閉按鈕 -->
                    </span>
                    <span class="minus-icon">
                        <i class="far fa-minus-square"></i>
                    </span>
                </button>
            </div>
            
            <!-- 回答區域 -->
            <div class="question-text">
                <p>
                  Answer...
                </p>
            </div>
            
        </article>
    <!-- 單一QA end -->
  • 重點 :
    1. 將整個單一QA區域的Class設為question
    2. 將回答區域的Class設為question-text
    3. 將開啟按鈕的Class設為plus-icon
    4. 將關閉按鈕的Class設為minus-icon

CSS重點

  • CSS多重選擇器 :
    EX : 
    1
    2
    3
    .one .two{}    /*兩個 class 中有空格*/
    .one.two{}     /*兩個 class 中沒有空格*/
    .one, .two{}   /*兩個 class 中出現逗號*/
    • 差別 :

      • .one.two{} : 某個區塊必須同時具有one和 two的 class 時，才能被CSS所選擇的到。

      • .one .two{} : 必須要是在one裡面的two，才會被選擇到。例如 : 

        1
        2
        3
        4
        5
        <div class = "one">
            <div class = "two">
                ..欲選擇之內容..
            </div>
        </div>

      • .one, .two{} : 指class中有one或two，都會被編輯器所選擇到。

以下為重點程式碼 :

  • 首先，question、question-text、plus-icon與minus-icon有各自的設定: 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    .question {
        ...
    }
    .question-text {
        ...
    }
    .plus-icon {
        ...
    }
    .minus-icon {
        ...
    }
  • 接著，再另外創立一個同為question-text的Class，將回答區域隱藏起來 : 
    1
    2
    3
    .question-text {
      display: none;
    }

    此Class與上方所提的同名Class，在被呼叫時會一起被執行

  • 同理，也另外創立一個同為minus-icon的Class，將關閉按鈕隱藏起來 : 
    1
    2
    3
    .minus-icon {
      display: none;
    }
  • 最後，創立一個show-text的Class，並利用上述所提CSS多重選擇器的特性，去指定開啟回答區域的顯示方式 : 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    /* 顯示回答區域*/
    .show-text .question-text {
      display: block;
    }
    /* 顯示關閉按鈕*/
    .show-text .minus-icon {
      display: inline;
    }
    /* 隱藏開啟按鈕*/
    .show-text .plus-icon {
      display: none;
    }

JavaScript重點

由上述CSS重點可知，只要在<article class="question">...</article>中新增show-text的Class，便能顯示回答區域；反之，當移除show-text，就能關閉回答區域。

  1. 利用class="question"去抓取每個article(等同於抓取每個單一QA) 
    1
    const questions = document.querySelectorAll('.question');
  2. 主要點擊事件 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    questions.forEach(function(question){ //選擇每個QA方格

        const btn = question.querySelector('.question-btn'); //篩選出該QA方格的按鈕元素
        
        btn.addEventListener('click',function(){ //只要該QA方格的按鈕元素有點擊事件
        
            question.classList.toggle("show-text"); //就在<article class="question">新增/刪除"show-text"的Class
        });
    });
  3. 同樣在btn.addEventListener()中，插入以下程式碼，便能達到「一個回答區域開啟時，其他回答區域皆關閉」的效果 
    1
    2
    3
    4
    5
    6
    7
    8
    questions.forEach(function(item){ //選擇每個QA方格

        if(item !== question){ //只要不是被選擇的article
        
            item.classList.remove("show-text"); //就將"show-text"的Class移除
            
        };
    });

參考與引用來源

  1. CSS多重選擇器介紹
  2. 多個 class 的表示法和寫法