diff --git a/assets/style.css b/assets/style.css index 8dff03d..24c3b3d 100644 --- a/assets/style.css +++ b/assets/style.css @@ -644,6 +644,7 @@ body .content.expanded { border-radius: 50%; opacity: 0; transition: all 0.3s ease; + pointer-events: none; /* 不阻挡点击,避免遮住图标可点击区域 */ } .search-box.has-results::after { @@ -697,15 +698,30 @@ body .content.expanded { /* 搜索图标和搜索引擎切换图标位置调整 */ .search-box .search-icon { - right: 1.5rem; + right: 2.0rem; cursor: pointer; transition: all 0.3s ease; + width: 32px; + height: 32px; + display: flex; + align-items: center; + justify-content: center; } +/* 下拉指示图标交互与状态 */ +.search-box .search-engine-toggle:hover { color: inherit; } + +.search-box.dropdown-open .search-engine-toggle { transform: translateY(-50%) rotate(180deg); } + .search-box .search-engine-toggle { - right: 3.5rem; + right: 0.8rem; cursor: pointer; font-size: 0.8rem; + width: 32px; + height: 32px; + display: flex; + align-items: center; + justify-content: center; } /* 搜索引擎下拉菜单 */ diff --git a/src/script.js b/src/script.js index 896fde0..7be3d4c 100644 --- a/src/script.js +++ b/src/script.js @@ -392,6 +392,7 @@ document.addEventListener('DOMContentLoaded', () => { // 搜索引擎相关元素 const searchIcon = document.querySelector('.search-icon'); + const searchEngineToggle = document.querySelector('.search-engine-toggle'); const searchEngineDropdown = document.querySelector('.search-engine-dropdown'); const searchEngineOptions = document.querySelectorAll('.search-engine-option'); @@ -990,10 +991,38 @@ document.addEventListener('DOMContentLoaded', () => { updateSearchEngineUI(); // 初始化搜索引擎下拉菜单事件 - searchIcon.addEventListener('click', (e) => { - e.stopPropagation(); - searchEngineDropdown.classList.toggle('active'); - }); + const toggleEngineDropdown = () => { + const next = !searchEngineDropdown.classList.contains('active'); + searchEngineDropdown.classList.toggle('active', next); + if (searchBox) { + searchBox.classList.toggle('dropdown-open', next); + } + if (searchEngineToggle) { + searchEngineToggle.setAttribute('aria-expanded', String(next)); + } + }; + + if (searchIcon) { + searchIcon.addEventListener('click', (e) => { + e.stopPropagation(); + toggleEngineDropdown(); + }); + } + + if (searchEngineToggle) { + searchEngineToggle.addEventListener('click', (e) => { + e.stopPropagation(); + toggleEngineDropdown(); + }); + // 键盘可访问性:Enter/Space 触发 + searchEngineToggle.addEventListener('keydown', (e) => { + if (e.key === 'Enter' || e.key === ' ') { + e.preventDefault(); + e.stopPropagation(); + toggleEngineDropdown(); + } + }); + } // 点击搜索引擎选项 searchEngineOptions.forEach(option => { @@ -1023,6 +1052,9 @@ document.addEventListener('DOMContentLoaded', () => { // 关闭下拉菜单 searchEngineDropdown.classList.remove('active'); + if (searchBox) { + searchBox.classList.remove('dropdown-open'); + } } }); }); @@ -1030,6 +1062,9 @@ document.addEventListener('DOMContentLoaded', () => { // 点击页面其他位置关闭下拉菜单 document.addEventListener('click', () => { searchEngineDropdown.classList.remove('active'); + if (searchBox) { + searchBox.classList.remove('dropdown-open'); + } }); } diff --git a/templates/layouts/default.hbs b/templates/layouts/default.hbs index b08c6c5..8bcaee6 100644 --- a/templates/layouts/default.hbs +++ b/templates/layouts/default.hbs @@ -104,8 +104,9 @@