Merge pull request #1 from bujijam/feature-flod_article

Feature fold article
bujijam · Aug 31, 2024 · 44b9324 · 44b9324
2 parents a702579 + 7492210
commit 44b9324
Showing 1 changed file with 21 additions and 7 deletions.
diff --git a/blog/blog.html b/blog/blog.html
@@ -24,16 +24,16 @@ <h1 id="title">bujijam的博客</h1>
             <header>
                 <h1>这是标题</h1>
                 <p>这是摘要这是摘要这是摘要这是摘要这是摘要这是摘要这是摘要这是摘要这是摘要这是摘要这是摘要这是摘要这是摘要这是摘要这是摘要这是摘要</p>
-                <p>发布于 <time datetime="2024-08-31">2024年8月31日</time></p>
+                <p><time datetime="2024-08-31">2024-08-31</time></p>
             </header>
-            <details>
+            <details class="blog-article">
                 <summary>阅读全文</summary>
                 <p>这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文
                 </p>
                 <p>是全文哦！</p>
                 <h2>是二级标题哦！</h2>
                 <p>文字！</p>
-                <button>折叠</button>
+                <button class="toggle-button">折叠</button>
             </details>
             <hr>
         </article>
@@ -42,16 +42,16 @@ <h2>是二级标题哦！</h2>
             <header>
                 <h1>这是标题</h1>
                 <p>这是摘要这是摘要这是摘要这是摘要这是摘要这是摘要这是摘要这是摘要这是摘要这是摘要这是摘要这是摘要这是摘要这是摘要这是摘要这是摘要</p>
-                <p>发布于 <time datetime="2024-08-31">2024年8月31日</time></p>
+                <p><time datetime="2024-08-31">2024-08-31</time></p>
             </header>
-            <details>
+            <details class="blog-article">
                 <summary>阅读全文</summary>
                 <p>这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文这是全文
                 </p>
                 <p>是全文哦！</p>
                 <h2>是二级标题哦！</h2>
                 <p>文字！</p>
-                <button>折叠</button>
+                <button class="toggle-button">折叠</button>
             </details>
             <hr>
         </article>
@@ -65,5 +65,19 @@ <h2>是二级标题哦！</h2>
     </div>
 
 </body>
-
+<script>
+    document.addEventListener('DOMContentLoaded', function () {
+        var detailsElements = document.querySelectorAll('.blog-article');
+        detailsElements.forEach(function (details) {
+            // 在每个details元素内部查找.toggle-button  
+            var button = details.querySelector('.toggle-button');
+            if (button) {
+                button.addEventListener('click', function (event) {
+                    // 切换details的open属性  
+                    details.open = !details.open;
+                });
+            }
+        });
+    });
+</script>
 </html>