如何讓“MORE”按鈕點擊事件觸發表單展開收縮？

本文介紹如何讓“more”按鈕點擊事件觸發表單的展開和收縮動畫，實現更豐富的用戶交互體驗。 問題是現有代碼僅通過點擊郵件圖標（已實現jquery動畫）展開表單，“more”按鈕無效。 解決方案是將“more”按鈕的點擊事件與表單的展開收縮邏輯關聯起來。

現有代碼依賴于.feedbackHeader元素的點擊事件來控制表單動畫。 為了讓“MORE”按鈕也能觸發該動畫，我們可以直接在“MORE”按鈕的點擊事件中模擬.feedbackHeader的點擊，或者更有效率地，直接調用其關聯的展開/收縮函數。

假設“MORE”按鈕的html代碼如下：

<button id="more">MORE</button>

以下JavaScript代碼演示了如何使用addEventListener實現：

document.getElementById('more').addEventListener('click', function() {   $('.feedbackHeader').click(); // 模擬點擊 .feedbackHeader });

此代碼在點擊“MORE”按鈕時，模擬點擊.feedbackHeader，從而觸發已有的表單展開收縮動畫。 這種方法復用現有代碼，避免冗余，并保持代碼一致性。 雖然也可以直接復制動畫代碼到“MORE”按鈕的事件處理函數中，但這會造成代碼重復，不利于維護。

其他方法，例如通過中間元素間接觸發，效率相對較低，不如直接調用.feedbackHeader的點擊事件簡潔高效。