jQuery slideToggle 實現手風琴效果：單一展開、動態資料綁定完整範例

需求：從資料庫讀取多筆資料，每筆標題點擊展開內容，同時關閉其他已展開項目（手風琴效果）。使用 slideToggle 搭配委派事件輕鬆實現。

完整 HTML + JS 範例

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.7.1.min.js"></script>
<style>
.accordion-item .content { display: none; }
</style>

<ul class="accordion" id="accordionList">
  <!-- 這裡由後端渲染或前端 AJAX 動態產生 -->
  <li class="accordion-item">
    <a href="#" class="trigger">標題 1</a>
    <div class="content">詳細內容 1...</div>
  </li>
  <li class="accordion-item">
    <a href="#" class="trigger">標題 2</a>
    <div class="content">詳細內容 2...</div>
  </li>
</ul>

<script>
$('#accordionList').on('click', '.trigger', function(e) {
    e.preventDefault();
    var $content = $(this).next('.content');
    var $item = $(this).closest('.accordion-item');
    
    // 關閉其他同層項目的內容
    $item.siblings().find('.content').slideUp(300);
    
    // 切換當前項目
    $content.slideToggle(300);
});

關鍵技巧解析

1. 事件委派：$('#accordionList').on('click', '.trigger', ...) 適用於動態新增的項目。
2. 同層關閉：$item.siblings().find('.content').slideUp() 確保單一展開。
3. 動畫隊列：jQuery 動畫預設排隊，若需同時執行可加 .stop(true, true)。

資料庫驅動版本（伪代碼）

// 後端傳回 JSON 陣列 [{id:1, title:'標題', content:'內容'}, ...]
$.getJSON('/api/items', function(items) {
    var html = items.map(item => 
        `

            ${item.title}
            
${item.content}
        
`
    ).join('');
    $('#accordionList').html(html);
});

無障礙增強

• 加入 aria-expanded="false" 屬性於 trigger，JS 中切換 true/false。
• 鍵盤支援：keydown 事件處理 Enter/Space 觸發。