有没有可能在内联CSS中保留切换，或者在电子邮件中发送可折叠部分的一些其他技巧？

Question

我几乎没有在HTML的经验，所以我道歉，如果这个问题已经得到了回答。

我想发送一封电子邮件，其中有几个非常长的部分，所以我希望它们是可折叠的。我不太了解html/css，但我能够把一些东西放在一起来折叠这些部分。但是，每当我将其转换为内联css时，我就不能再查看显示的部分。

我对可折叠部分的其他想法持开放态度，然而，我不能使用常规的css，任何属于它的东西，任何javascript，以及外部文档中的任何东西。

下面是示例代码

​

    <head>
      <style>
        body {
          font-family: "Open Sans", Arial;
          background: #CCC;
        }
    
        main {
          background: #EEE;
          width: auto;
          margin: 20px auto;
          padding: 10px 0;
          box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);
        }
    
        h2 {
          text-align: center;
        }
    
        p {
          font-size: 16px;
        }
    
        input {
          display: none;
          visibility: hidden;
        }
    
        label {
          display: block;
          padding: 0.5em;
          text-align: center;
          border-bottom: 1px solid #CCC;
          color: #444;
        }
    
        label:hover {
          color: #000;
        }
    
        label::before {
          font-family: Consolas, monaco, monospace;
          font-weight: bold;
          font-size: 15px;
          content: "+";
          vertical-align: text-top;
          display: inline-block;
          width: 20px;
          height: 20px;
          margin-right: 3px;
          background: radial-gradient(ellipse at center, #CCC 50%, transparent 50%);
        }
    
        #expand0 {
          height: 0px;
          overflow: hidden;
          transition: height 0.5s;
          background: #FFF;
          color: #000;
        }
    
        section {
          padding: 0 20px;
        }
    
        #toggle0:checked~#expand0 {
          height: 85px;
        }
    
        #toggle0:checked~label::before {
          content: "-";
        }
    </style>
    </head>
    
    <main>
      <input id="toggle0" type="checkbox" checked>
      <label for="toggle0">Example</label>
      <div id="expand0">
        <section>
          <p><a href="https://coubsecure-s.akamaihd.net/get/b179/p/coub/simple/cw_timeline_pic/3022e666160/33576a2d011ddb7a1b1a2/big_1499702421_image.jpg">Hello There</a></p>
          <p><a href="https://thumbs.gfycat.com/ClosedLastAtlanticsharpnosepuffer-poster.jpg">General Kenobi</a></p>
        </section>
      </div>
     
    </main>

​

示例内联

​

<main style="background-color:#EEE;background-image:none;background-repeat:repeat;background-position:top left;background-attachment:scroll;width:auto;margin-top:20px;margin-bottom:20px;margin-right:auto;margin-left:auto;padding-top:10px;padding-bottom:10px;padding-right:0;padding-left:0;box-shadow:0 3px 5px rgba(0, 0, 0, 0.3);" >
          <input id="toggle0" type="checkbox" checked style="display:none;visibility:hidden;" >
          <label for="toggle0" style="display:block;padding-top:0.5em;padding-bottom:0.5em;padding-right:0.5em;padding-left:0.5em;text-align:center;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:#CCC;color:#444;" >Example</label>
          <div id="expand0" style="height:0px;overflow:hidden;transition:height 0.5s;background-color:#FFF;background-image:none;background-repeat:repeat;background-position:top left;background-attachment:scroll;color:#000;" >
            <section style="padding-top:0;padding-bottom:0;padding-right:20px;padding-left:20px;" >
              <p style="font-size:16px;" ><a href="https://coubsecure-s.akamaihd.net/get/b179/p/coub/simple/cw_timeline_pic/3022e666160/33576a2d011ddb7a1b1a2/big_1499702421_image.jpg">Hello There</a></p>
              <p style="font-size:16px;" ><a href="https://thumbs.gfycat.com/ClosedLastAtlanticsharpnosepuffer-poster.jpg">General Kenobi</a></p>
            </section>
          </div>
         
        </main>

​

Answer 1

您的示例不起作用，因为您不能为checked状态指定内联样式。为此，您必须使用css。

另外，你说你想在电子邮件中使用它，我认为任何电子邮件客户端都不会呈现你的可折叠内容。

所以回答你的问题:你必须使用CSS (文件或标签)来处理这种类型的行为，仅使用内联CSS是不可能的。如果你想通过电子邮件发送，最好完全忽略这些可折叠的元素，也许可以减少你在电子邮件中发送的东西的数量。