:bug: Fix: details 标签的问题

- 图标不显示
- 第一次打开没有动画

2 files changed, 11 insertions, 9 deletions

diff --git a/assets/matcha/matcha.js b/assets/matcha/matcha.js
index 54aed5d..17fe9d6 100644
--- a/assets/matcha/matcha.js
+++ b/assets/matcha/matcha.js
@@ -184,17 +184,17 @@ scaleOut = function(object, time) {
 
 //details 标签，适配 BracketDown 插件
 var detailsAnimate = function() {
+    $('details').attr('open','');//强制开启，但不显示内容
     $('details').on("click",function(e){
         e.preventDefault();//阻止 details 直接显示内容
-        if(!$(this).attr('open')){
+        if(!$(this).hasClass('opened')){
             $(this).children('.bracketdown-details-content').slideDown();
-            $(this).attr('open','');
+            $(this).addClass('opened');
         }else{
             $(this).children('.bracketdown-details-content').slideUp();
             $(this).addClass('closing');
             setTimeout(() => { 
-                $(this).removeClass('closing');
-                $(this).removeAttr('open');
+                $(this).removeClass('closing').removeClass('opened');
             }, 300);
         }
     });
diff --git a/assets/matcha/matcha.libs.css b/assets/matcha/matcha.libs.css
index d6af614..0e39179 100644
--- a/assets/matcha/matcha.libs.css
+++ b/assets/matcha/matcha.libs.css
@@ -90,18 +90,20 @@ div.code-toolbar>.toolbar>.toolbar-item>button::before {
 	list-style-type: none
 }
 .post-content details summary::before {
-	content: '\e642';
+	content: '\e749';
 	font-family: "iconfont" !important;
 	display: inline-block;
 	transition: transform .3s;
-	margin-right: .5em
-}
-.post-content details[open]:not(.closing) summary::before {
+	margin-right: .5em;
 	transform: rotate(90deg)
 }
+.post-content details.opened:not(.closing) summary::before {
+	transform: rotate(180deg)
+}
 
 .post-content details .bracketdown-details-content {
-	margin-left: 1.5em!important
+	margin-left: 1.5em!important;
+	display: none
 }