jQuery 點擊事件首次無反應：toggle() 替代方案與根因分析

原始碼用 html() 判斷文字切換狀態，首次點擊無反應常見原因：

1. 事件綁定時機早於 DOM 就緒（未包在 $(function(){})）。
2. 選取器 #screen-more 匹配多個元素或為空。
3. CSS 初始高度未明確設定，導致 height 計算異常。

優化重構：使用 toggleClass + CSS

<style>
.brand-list { height: 41px; overflow: hidden; transition: height .3s; }
.brand-list.expanded { height: 73px; overflow: auto; }
</style>

<button id="screen-more" class="toggle-btn">更多+</button>
<div class="screen-modu-list brand-list">...</div>

<script>
$('#screen-more').on('click', function() {
    var $list = $('.screen-modu-list.brand-list');
    $list.toggleClass('expanded');
    $(this).text($list.hasClass('expanded') ? '收起-' : '更多+');
});
</script>

進階：jQuery slideToggle 動畫版

$('#screen-more').click(function() {
    $('.screen-modu-list.brand-list').slideToggle(300, function() {
        $('#screen-more').text($(this).is(':visible') ? '收起-' : '更多+');
    });
});

最佳實務核對表

• ☑ 事件綁定在 $(document).ready() 或 $(function(){}) 內。
• ☑ 使用 .on('click', ...) 而非舊版 .click()（支援動態元素）。
• ☑ 狀態由 CSS class 控制，不依賴文字比對。
• ☑ 初始狀態在 CSS 明確宣告。