feat: 为文章顶部菜单的分享方式菜单添加展开和收回动画

HowieHz · Dec 7, 2024 · 8f3117b · 8f3117b
1 parent a3f59ec
commit 8f3117b
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 7 deletions.
diff --git a/src/assets/main.js b/src/assets/main.js
@@ -158,4 +158,12 @@ $(document).ready(function () {
       shareFooter.slideDown(200);
     }
   });
+  $("#actions #action-share").click(function () {
+    const shareMenu = $("#share-list");
+    if (shareMenu.is(":visible")) {
+      shareMenu.slideUp(200);
+    } else {
+      shareMenu.slideDown(200);
+    }
+  });
 });
diff --git a/src/styles/main.css b/src/styles/main.css
@@ -617,14 +617,14 @@ body {
   font-style: italic;
 }
 
-#header-post #share {
+#header-post #share-list {
   clear: both;
   padding-top: 1rem;
   padding-right: 2rem;
   text-align: right;
 }
 
-#header-post #share li {
+#header-post #share-list li {
   display: block;
   margin: 0;
 }

diff --git a/templates/assets/dist/main.iife.js b/templates/assets/dist/main.iife.js
diff --git a/templates/assets/dist/style.css b/templates/assets/dist/style.css
diff --git a/templates/fragments/post-nav.html b/templates/fragments/post-nav.html
@@ -65,7 +65,7 @@
           <li>
             <a
               class="icon"
-              href="#"
+              href="javascript:void(0);"
               onclick="$('html, body').animate({ scrollTop: 0 }, 'fast');"
               th:aria-label="#{fragment.post-nav.actions.to-top-icon.aria-label}"
             >
@@ -80,11 +80,12 @@
           <li>
             <a class="icon" href="#" th:aria-label="#{fragment.post-nav.actions.share-icon.aria-label}">
               <i
+                id="action-share"
                 class="iconify iconify-middle"
                 data-icon="mdi:share-variant-outline"
                 onmouseover="$('#i-share').toggle();"
                 onmouseout="$('#i-share').toggle();"
-                onclick="$('#share').toggle();return false;"
+                onclick="return false;"
               ></i>
             </a>
           </li>
@@ -98,7 +99,11 @@
         <span id="i-home" class="info" style="display: none">[(#{fragment.post-nav.backToHome})]</span>
       </span>
       <br />
-      <div id="share" style="display: none" th:with="permalink=${post?.status?.permalink}, title=${post?.spec?.title}">
+      <div
+        id="share-list"
+        style="display: none"
+        th:with="permalink=${post?.status?.permalink}, title=${post?.spec?.title}"
+      >
         <th:block th:insert="~{fragments/common :: share}"></th:block>
       </div>
       <div id="toc"></div>