diff --git a/_config/css/styles.css b/_config/css/styles.css index 7e1c264..9805134 100644 --- a/_config/css/styles.css +++ b/_config/css/styles.css @@ -212,6 +212,135 @@ background-color: #ccc; vertical-align: text-bottom; } +/* 下拉框样式 */ +.cover-main .buttons .dropdown { + position: relative; + display: inline-block; + margin: 0 1rem; +} + +.cover-main .buttons .dropdown-toggle { + font-weight: 700; + position: relative; + display: inline-flex; + align-items: center; + justify-content: center; + padding: 12px 25px; + font-size: 14px; + text-align: center; + line-height: 18px; + color: var(--theme-color); + background: #fff; + outline: none; + border: none; + cursor: pointer; + overflow: hidden; + transition: all 0.25s cubic-bezier(0.215, 0.61, 0.355, 1); + vertical-align: baseline; + text-decoration: none; +} + +.cover-main .buttons .dropdown-toggle:before, +.cover-main .buttons .dropdown-toggle:after { + content: ''; + display: block; + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + border: 2px solid var(--theme-color); + box-sizing: border-box; + border-radius: 5px; +} + +.cover-main .buttons .dropdown-toggle:after { + background: var(--theme-color); + transform: translateX(-101%); + transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1); +} + +.cover-main .buttons .dropdown-toggle:hover, +.cover-main .buttons .dropdown.active .dropdown-toggle { + color: white !important; + box-shadow: 0 5px 16px rgba(229, 9, 20, 0.3); + border-radius: 5px; +} + +.cover-main .buttons .dropdown-toggle:hover:after, +.cover-main .buttons .dropdown.active .dropdown-toggle:after { + transform: translateX(0); +} + +.cover-main .buttons .dropdown-toggle span { + position: relative; + z-index: 1; +} + +.cover-main .buttons .dropdown-menu { + position: absolute; + top: 100%; + left: 0; + margin-top: 8px; + min-width: 200px; + background: #fff; + border: 2px solid var(--theme-color); + border-radius: 5px; + box-shadow: 0 5px 16px rgba(229, 9, 20, 0.3); + opacity: 0; + visibility: hidden; + transform: translateY(-10px); + transition: all 0.25s cubic-bezier(0.215, 0.61, 0.355, 1); + z-index: 1000; + overflow: hidden; +} + +.cover-main .buttons .dropdown.active .dropdown-menu { + opacity: 1; + visibility: visible; + transform: translateY(0); +} + +.cover-main .buttons .dropdown-menu a { + display: block; + padding: 12px 20px; + font-weight: 700; + font-size: 14px; + color: var(--theme-color); + background: #fff; + text-align: left; + margin: 0; + border: none; + border-radius: 0; + transition: all 0.2s ease; + position: relative; +} + +.cover-main .buttons .dropdown-menu a:before, +.cover-main .buttons .dropdown-menu a:after { + display: none; +} + +.cover-main .buttons .dropdown-menu a:hover { + background: var(--theme-color); + color: white !important; + box-shadow: none; +} + +.cover-main .buttons .dropdown-menu a:first-child { + border-top-left-radius: 3px; + border-top-right-radius: 3px; +} + +.cover-main .buttons .dropdown-menu a:last-child { + border-bottom-left-radius: 3px; + border-bottom-right-radius: 3px; +} + +.cover-main .buttons .dropdown-menu a:not(:last-child) { + border-bottom: 1px solid rgba(229, 9, 20, 0.1); +} + /****** Sidebar ******/ .sidebar .app-name-link img { @@ -717,6 +846,20 @@ body .sidebar-toggle span:nth-child(3) { .buttons a { width: 50%; } + + .cover-main .buttons .dropdown { + width: 50%; + } + + .cover-main .buttons .dropdown-toggle { + width: 100%; + } + + .cover-main .buttons .dropdown-menu { + width: 100%; + left: 0; + } + .footer { margin-bottom: 20%; padding: 0 2%; @@ -738,6 +881,20 @@ body .sidebar-toggle span:nth-child(3) { width: 50%; margin: 0.2rem 1rem; } + + .cover-main .buttons .dropdown { + width: 50%; + margin: 0.2rem 1rem; + } + + .cover-main .buttons .dropdown-toggle { + width: 100%; + } + + .cover-main .buttons .dropdown-menu { + width: 100%; + left: 0; + } .luckday-video { flex-direction: column; diff --git a/_config/js/dropdown.js b/_config/js/dropdown.js new file mode 100644 index 0000000..46ae6ae --- /dev/null +++ b/_config/js/dropdown.js @@ -0,0 +1,87 @@ +// 下拉框交互功能 +(function() { + 'use strict'; + + window.$docsify.plugins = [].concat(window.$docsify.plugins || [], function(hook) { + let clickHandler = null; + + // 使用事件委托的方式初始化下拉框 + function initDropdowns() { + // 如果已经初始化过,先移除旧的事件监听器 + if (clickHandler) { + document.removeEventListener('click', clickHandler, true); + } + + // 使用事件委托处理下拉框点击 + clickHandler = function(e) { + // 检查是否点击了下拉按钮或其子元素 + const toggle = e.target.closest('.dropdown-toggle'); + if (toggle) { + e.preventDefault(); + e.stopPropagation(); + + const dropdown = toggle.closest('.dropdown'); + if (!dropdown) return; + + // 关闭其他打开的下拉框 + const allDropdowns = document.querySelectorAll('.dropdown'); + allDropdowns.forEach(function(otherDropdown) { + if (otherDropdown !== dropdown) { + otherDropdown.classList.remove('active'); + } + }); + + // 切换当前下拉框 + dropdown.classList.toggle('active'); + return; + } + + // 检查是否点击了下拉菜单项或其子元素 + const menuItem = e.target.closest('.dropdown-menu a'); + if (menuItem) { + const dropdown = menuItem.closest('.dropdown'); + if (dropdown) { + // 关闭下拉框(但允许链接正常跳转) + setTimeout(function() { + dropdown.classList.remove('active'); + }, 100); + } + return; + } + + // 点击页面其他地方时关闭所有下拉框 + if (!e.target.closest('.dropdown')) { + const allDropdowns = document.querySelectorAll('.dropdown'); + allDropdowns.forEach(function(dropdown) { + dropdown.classList.remove('active'); + }); + } + }; + + document.addEventListener('click', clickHandler, true); + } + + // 在 ready 时初始化 + hook.ready(function() { + // 延迟初始化,确保 coverpage 内容已渲染 + setTimeout(function() { + const dropdowns = document.querySelectorAll('.dropdown'); + if (dropdowns.length > 0) { + initDropdowns(); + } + }, 500); + }); + + // 监听 docsify 的内容更新(用于动态加载的内容) + hook.doneEach(function() { + // 延迟初始化,确保内容已渲染 + setTimeout(function() { + const dropdowns = document.querySelectorAll('.dropdown'); + if (dropdowns.length > 0) { + initDropdowns(); + } + }, 300); + }); + }); +})(); + diff --git a/_coverpage.md b/_coverpage.md index fc51290..55be7e5 100644 --- a/_coverpage.md +++ b/_coverpage.md @@ -98,7 +98,13 @@