fix: 修復手風琴展開問題並統一全站 Footer 與 Navigation by thc1006 · Pull Request #19 · thc1006/sch001-108platform

thc1006 · 2026-01-29T11:20:27Z

Summary

修復 competency-map.html 手風琴展開時內容預設顯示的問題
統一全站 20 個頁面的 Footer 格式（關於我們、網站地圖、聯絡我們）
統一 15 個頁面的 Navigation 導航欄（新增「關於我們」連結）

Changes

手風琴修復 (competency-map.html)

CSS: 使用 !important 確保 .accordion-content 正確隱藏
JS: 改用 CSS class 切換方式 (.is-open) 取代內聯樣式
HTML: 移除 pb-4 類別，改由 CSS 統一控制 padding

Footer 統一

所有頁面現在包含：

網站標題與描述
關於我們 / 網站地圖 / 聯絡我們連結
統一版權聲明格式

Navigation 統一

為所有子頁面的導航欄新增「關於我們」連結

Test plan

開啟 competency-map.html，確認手風琴預設為收合狀態
點擊手風琴，確認可正常展開/收合
檢查各頁面 Footer 是否一致
檢查各頁面 Navigation 是否包含「關於我們」連結

## 修復內容 ### 1. 手風琴展開問題 (competency-map.html) - 修正 CSS：使用 !important 確保 accordion-content 正確隱藏 - 修正 JS：改用 CSS class 切換方式取代內聯樣式 - 移除 HTML 中的 pb-4 類別，由 CSS 統一控制 ### 2. Footer 統一 (20 個頁面) - 所有頁面使用統一的 Footer 格式 - 包含：網站標題、描述、關於我們/網站地圖/聯絡我們連結 - 統一版權聲明格式 ### 3. Navigation 統一 (15 個頁面) - 為所有頁面的導航欄新增「關於我們」連結 - 確保導航一致性

Copilot

Pull request overview

This PR addresses three key areas: fixing an accordion expansion bug in competency-map.html, standardizing footer markup across 20 pages, and adding "關於我們" navigation links across multiple pages.

Changes:

Fixed accordion display issue in competency-map.html by adding CSS rules with explicit hiding and implementing class-based toggle logic
Updated footer markup to include site title, description, navigation links (關於我們/網站地圖/聯絡我們), and copyright notice across 20 files
Added "關於我們" navigation link to 14 pages' navigation menus

Reviewed changes

Copilot reviewed 20 out of 20 changed files in this pull request and generated 6 comments.

Show a summary per file

File	Description
sitemap.html	Updated footer with standardized format including links and description
learning-portfolio/tools.html	Added "關於我們" to navigation and updated footer
learning-portfolio/reflection-guide.html	Added "關於我們" to navigation and updated footer
learning-portfolio/portfolio-gallery.html	Updated footer only (navigation unchanged)
learning-portfolio/index.html	Added "關於我們" to navigation and updated footer
learning-portfolio/activity-database.html	Added "關於我們" to navigation and updated footer
civic-tech-map/index.html	Added "關於我們" to navigation and updated footer
career-exploration/senior-interviews.html	Updated footer only (custom navigation retained)
career-exploration/index.html	Updated footer only (navigation unchanged)
career-exploration/competency-map.html	Fixed accordion CSS/JS behavior and updated footer
autonomous-learning/topic-ideas.html	Added "關於我們" to navigation and updated footer
autonomous-learning/resource-map.html	Added "關於我們" to navigation and updated footer
autonomous-learning/plan-templates.html	Added "關於我們" to navigation and updated footer
autonomous-learning/methodology.html	Added "關於我們" to navigation and updated footer
autonomous-learning/index.html	Added "關於我們" to navigation and updated footer
advanced-resources/reading-list.html	Added "關於我們" to navigation and updated footer
advanced-resources/online-courses.html	Added "關於我們" to navigation and updated footer
advanced-resources/index.html	Added "關於我們" to navigation (footer already updated)
advanced-resources/competitions.html	Added "關於我們" to navigation and updated footer
about.html	Updated footer with standardized format

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-01-29T11:24:47Z

career-exploration/competency-map.html

-                        content.style.maxHeight = content.scrollHeight + "px";
-                        if (icon) icon.style.transform = 'rotate(180deg)';
-                    }
+                    const isOpen = card.classList.toggle('is-open');


The accordion toggle implementation should also update the aria-expanded attribute for accessibility. When toggling the is-open class, the code should also set aria-expanded to match the open state. Add a line like: button.setAttribute('aria-expanded', isOpen); after line 190 to ensure screen readers can properly announce the accordion state.

Suggested change

const isOpen = card.classList.toggle('is-open');

const isOpen = card.classList.toggle('is-open');

button.setAttribute('aria-expanded', isOpen);

career-exploration/competency-map.html

Copilot · 2026-01-29T11:24:47Z

sitemap.html

-            <p class="text-center">&copy; 2026 台灣教育處方籤</p>
+            <div class="text-center">
+                <h3 class="text-2xl font-bold">台灣教育處方籤</h3>
+                <p class="text-gray-400 mt-1">一個由關心台灣教育的學生與開發者發起的專案。</p>


The footer description "一個由關心台灣教育的學生與開發者發起的專案。" differs from the main index.html page which uses "一個開源、共創的教育資源整合平台。" This creates an inconsistency across the site. Consider using the same description in all footers to maintain consistency, or update the main index.html to match this new description.

learning-portfolio/portfolio-gallery.html

career-exploration/index.html

career-exploration/competency-map.html

- 新增遺漏的「關於我們」導航連結 (portfolio-gallery.html, career-exploration/index.html) - 統一 footer 描述文字以保持一致性 - 增強手風琴元件的無障礙支援 (aria-expanded, aria-controls 屬性)

Copilot

Pull request overview

Copilot reviewed 21 out of 21 changed files in this pull request and generated 21 comments.

Comments suppressed due to low confidence (1)

index.html:291

The Footer structure in index.html uses flex flex-col md:flex-row justify-between items-center text-center md:text-left with a horizontal layout that differs from other pages which use text-center for all content. This inconsistency means the main index page footer has a different visual appearance and layout compared to all other pages in the site. For true consistency across the site, consider using the same centered layout structure as the other pages.

            <div class="flex flex-col md:flex-row justify-between items-center text-center md:text-left">
                <div class="mb-6 md:mb-0">
                    <h3 class="text-2xl font-bold">台灣教育處方籤</h3>
                    <p class="text-gray-400 mt-1">一個由關心台灣教育的學生與開發者發起的專案。</p>
                </div>
                <div class="flex space-x-6">
                    <a href="about.html" class="text-gray-400 hover:text-white transition duration-300">關於我們</a>
                    <a href="sitemap.html" class="text-gray-400 hover:text-white transition duration-300">網站地圖</a>
                    <a href="mailto:contact@example.com" class="text-gray-400 hover:text-white transition duration-300">聯絡我們</a>
                </div>
            </div>

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

career-exploration/competency-map.html

autonomous-learning/plan-templates.html

learning-portfolio/reflection-guide.html

learning-portfolio/activity-database.html

civic-tech-map/index.html

advanced-resources/competitions.html

autonomous-learning/resource-map.html

autonomous-learning/index.html

about.html

Copilot · 2026-01-29T11:34:48Z

career-exploration/competency-map.html

        .accordion-content {
-            max-height: 0;
-            overflow: hidden;
-            transition: max-height 0.5s ease-in-out;
+            max-height: 0 !important;
+            overflow: hidden !important;
+            padding-top: 0 !important;
+            padding-bottom: 0 !important;
+            opacity: 0;
+            transition: max-height 0.4s ease-in-out, padding 0.3s ease-in-out, opacity 0.3s ease-in-out;
+        }
+        .competency-card.is-open .accordion-content {
+            max-height: 2000px !important;
+            padding-top: 0 !important;
+            padding-bottom: 1rem !important;
+            opacity: 1;


The excessive use of !important on multiple CSS properties (max-height, overflow, padding-top, padding-bottom) suggests potential CSS specificity issues. While this may fix the immediate problem, it makes the styles harder to maintain and override in the future. Consider investigating why these styles are being overridden and addressing the root cause by either increasing selector specificity or reorganizing the CSS cascade order instead of relying on !important.

將全站 Footer 中的 contact@example.com 替換為正式信箱

使用 #competency-grid 作為父選擇器提高特異性，取代原本的 !important 宣告，改善 CSS 可維護性

Copilot AI review requested due to automatic review settings January 29, 2026 11:20

Copilot started reviewing on behalf of thc1006 January 29, 2026 11:20 View session

Copilot AI reviewed Jan 29, 2026

View reviewed changes

fix: 修復 PR 審查中 AI 建議的問題

2266b86

- 新增遺漏的「關於我們」導航連結 (portfolio-gallery.html, career-exploration/index.html) - 統一 footer 描述文字以保持一致性 - 增強手風琴元件的無障礙支援 (aria-expanded, aria-controls 屬性)

thc1006 requested a review from Copilot January 29, 2026 11:28

Copilot started reviewing on behalf of thc1006 January 29, 2026 11:29 View session

Copilot AI reviewed Jan 29, 2026

View reviewed changes

thc1006 added 2 commits January 29, 2026 19:50

chore: 更新聯絡信箱為 hctsai@linux.com

edbd7ac

將全站 Footer 中的 contact@example.com 替換為正式信箱

refactor: 移除 CSS !important，改用高特異性選擇器

9406cba

使用 #competency-grid 作為父選擇器提高特異性，取代原本的 !important 宣告，改善 CSS 可維護性

thc1006 merged commit 9a9739b into main Jan 29, 2026
2 checks passed

thc1006 deleted the feat/global-civic-tech-nav branch January 29, 2026 11:57

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: 修復手風琴展開問題並統一全站 Footer 與 Navigation#19

fix: 修復手風琴展開問題並統一全站 Footer 與 Navigation#19
thc1006 merged 4 commits intomainfrom
feat/global-civic-tech-nav

thc1006 commented Jan 29, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Jan 29, 2026

Uh oh!

Uh oh!

Copilot AI Jan 29, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI Jan 29, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Comments

	const isOpen = card.classList.toggle('is-open');
	const isOpen = card.classList.toggle('is-open');
	button.setAttribute('aria-expanded', isOpen);

Conversation

thc1006 commented Jan 29, 2026

Summary

Changes

手風琴修復 (competency-map.html)

Footer 統一

Navigation 統一

Test plan

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Jan 29, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI Jan 29, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI Jan 29, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Comments