为了账号安全,请及时绑定邮箱和手机立即绑定

在 StackEdit 中可折叠

在 StackEdit 中可折叠

隔江千里 2023-01-06 15:39:27

StackEdit 删除了某些 html 标签,使得实现可折叠按钮变得很麻烦。

你如何在 StackEdit 中实现可折叠部分?


查看完整描述

1 回答

?
沧海一幻觉

TA贡献1575条经验 获得超5个赞

结果:

//img4.sycdn.imooc.com/63b7d07900017f7e20810480.jpg

将以下 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>


查看完整回答
反对 回复 2023-01-06
  • 1 回答
  • 0 关注
  • 14 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信