diff --git a/assets/javascripts/app.js b/assets/javascripts/app.js
index 38647a3..843abc8 100644
--- a/assets/javascripts/app.js
+++ b/assets/javascripts/app.js
@@ -3242,6 +3242,51 @@ $(function() {
       closeMenu();
     }
   });
+});
+$(document).ready(function () {
+    var $searchBox = $('.search-box');
+    var $btn = $('.btn-search');
+    var $input = $('.input-search');
+
+    // 點擊按鈕展開/收合
+    $btn.on('click', function () {
+        var isExpanded = $btn.attr('aria-expanded') === 'true';
+        if (isExpanded) {
+            $btn.attr('aria-expanded', 'false');
+            $searchBox.removeClass('searching');
+            $input.blur();
+        } else {
+            $btn.attr('aria-expanded', 'true');
+            $searchBox.addClass('searching');
+            $input.focus();
+        }
+    });
+
+    // ✅ 監聽整個 search-box 的焦點進入（含 Tab 鍵進入 input）
+    $searchBox.on('focusin', function () {
+        $btn.attr('aria-expanded', 'true');
+        $searchBox.addClass('searching');
+    });
+
+    // ✅ 監聽整個 search-box 的焦點離開
+    $searchBox.on('focusout', function () {
+        // 延遲確認焦點是否還在 search-box 內
+        setTimeout(function () {
+            if (!$searchBox.find(':focus').length) {
+                $btn.attr('aria-expanded', 'false');
+                $searchBox.removeClass('searching');
+            }
+        }, 150);
+    });
+
+    // Escape 收合並返回按鈕
+    $input.on('keydown', function (e) {
+        if (e.keyCode === 27) {
+            $btn.attr('aria-expanded', 'false');
+            $searchBox.removeClass('searching');
+            $btn.focus();
+        }
+    });
 });
   // 執行 member等高計算，目前改用flexbox故mark掉 by ika 20160105
   // $(window).load(function() {