在 StackEdit 中可折叠

结果：将以下 CSS 插入到<head>StackEdit 模板的中，并在标记末尾上方插入以下 javascript 代码body。<style>/* Style the button that is used to open and close the collapsible content */.collapsible {  background-color: #eee;  color: #444;  cursor: pointer;  padding: 18px;  width: 100%;  border: none;  text-align: left;  outline: none;  font-size: 15px;}/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */.active, .collapsible:hover {  background-color: #ccc;}/* Style the collapsible content. Note: hidden by default */.content {  padding: 0 18px;  display: none;  overflow: hidden;  background-color: #f1f1f1;}</style><script>var coll = document.getElementsByClassName("collapsible");var i;for (i = 0; i < coll.length; i++) {  coll[i].addEventListener("click", function() {    this.classList.toggle("active");    var content = this.nextElementSibling;    if (content.style.display === "block") {      content.style.display = "none";    } else {      content.style.display = "block";    }  });}</script>发布页面时使用您创建的模板，它应该类似于：    <!DOCTYPE html>    <html>        <head>      <meta charset="utf-8">      <meta name="viewport" content="width=device-width, initial-scale=1.0">      <title>{{files.0.name}}</title>      <link rel="stylesheet" href="https://stackedit.io/style.css" />    <style>    /* Style the button that is used to open and close the collapsible content */    .collapsible {      background-color: #eee;      color: #444;      cursor: pointer;      padding: 18px;      width: 100%;      border: none;      text-align: left;      outline: none;      font-size: 15px;    }        /* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */    .active, .collapsible:hover {      background-color: #ccc;    }        /* Style the collapsible content. Note: hidden by default */    .content {      padding: 0 18px;      display: none;      overflow: hidden;      background-color: #f1f1f1;    }    </style>    </head>        {{#if pdf}}    <body class="stackedit stackedit--pdf">    {{else}}    <body class="stackedit">    {{/if}}    <a href="./" style="        position:  absolute;        top:  10px;        left:  10px;    ">Back</a>      <div class="stackedit__html">{{{files.0.content.html}}}</div>                <script>    var coll = document.getElementsByClassName("collapsible");    var i;        for (i = 0; i < coll.length; i++) {      coll[i].addEventListener("click", function() {        this.classList.toggle("active");        var content = this.nextElementSibling;        if (content.style.display === "block") {          content.style.display = "none";        } else {          content.style.display = "block";        }      });    }    </script>    </body>    </html>现在可以创建可折叠部分：<div cursor="pointer" class="collapsible">Open Section 1</div><div class="content">  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p></div>

在 StackEdit 中可折叠

1回答