在文章末尾添加折叠按钮

bujijam · Aug 31, 2024 · dddda1f · dddda1f
1 parent a702579
commit dddda1f
Showing 1 changed file with 19 additions and 5 deletions.
diff --git a/blog/blog.html b/blog/blog.html
@@ -26,14 +26,14 @@ <h1>这是标题</h1>
                 <p>这是摘要这是摘要这是摘要这是摘要这是摘要这是摘要这是摘要这是摘要这是摘要这是摘要这是摘要这是摘要这是摘要这是摘要这是摘要这是摘要</p>
                 <p>发布于 <time datetime="2024-08-31">2024年8月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>
@@ -44,14 +44,14 @@ <h1>这是标题</h1>
                 <p>这是摘要这是摘要这是摘要这是摘要这是摘要这是摘要这是摘要这是摘要这是摘要这是摘要这是摘要这是摘要这是摘要这是摘要这是摘要这是摘要</p>
                 <p>发布于 <time datetime="2024-08-31">2024年8月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>