时间戳

首页 > 解决方案 > 使用按钮在 GMail 的电子邮件中隐藏 html 元素（列表）（无 JS，无侧 css 文件无 html 头）

html - 使用按钮在 GMail 的电子邮件中隐藏 html 元素（列表）（无 JS，无侧 css 文件无 html 头）

问题描述

短的

如果在不使用 javascrit、外部文件或 head+style（电子邮件限制）的情况下未按下复选框，我希望隐藏列表（）（可见性：隐藏）。这个怎么做 ？

长

你好溢出者，

我想使用 html 标签样式属性

 <anytag style="">

使按钮显示电子邮件中的列表。

为了获得更广泛的支持，我希望按钮“如果未选中则隐藏它”，因此如果接收器不支持使用的技巧，则无论如何都会显示列表（ul）。

此时，我生成的页面有点像这样（使用像https://codebeautify.org/htmlviewer/这样的 htlm 阅读器）

<body>        
     <h2>Rules applied to check EMAIL</h2>
     <br>
     
    <!--Some lines with rules for the field
    such as maximum lenght.
    -->
    
     <button id = "b1" > show lines with invalid or empty datas for this field
     </button>    <!--Edit : has been replaced by checkbox-->
     <ul id="ul1"> 
     invalid EMAIL on line(s) : 
         <li style="margin-left:20px">12</li>
         <li style="margin-left:20px">16</li>
         <li style="margin-left:20px">51</li>
         <li style="margin-left:20px">52</li>
         <li style="margin-left:20px">53</li>
         <li style="margin-left:20px">57</li>
         <li style="margin-left:20px">62</li>
    </ul>
     
     <br>
     
     <h2>Rules applied to check BIRTHDATE</h2>
     <br>
     
    <!--Some lines with rules for the field
    such as minimum value.
    -->
    
     <button id = "b2" > show lines with invalid or empty datas for this field
     </button> <!--Edit : has been replaced by checkbox-->
     <ul id="ul2"> 
     invalid BIRTHDATE on line(s) : 
         <li style="margin-left:20px">12</li>
         <li style="margin-left:20px">35</li>
         <li style="margin-left:20px">51</li>
    </ul>
</body>

如前所述，如果未单击按钮，我想要一种隐藏列表的方法。由于到处都禁用了 Javascript，并且某些邮箱只是忽略了该<style>标签，因此我只想要一个适用于内联 css 或普通 html 的解决方案。

谢谢。

标签： htmlcssemail

解决方案

HTML：

<label for="b1">show lines with invalid or empty datas for this field</label>
<input type="checkbox" id="b1">
<ul id="ul1">[...]</ul>

CSS：

#b1, #ul1 {
  display: none;
}

#b1:checked + #ul1 {
  display: inherit;
}

如果你想在不使用 JavaScript 的情况下制作交互式按钮，你可以使用复选框来代替。在 HTML 中，您将复选框元素放在要更改的元素旁边。在 CSS 中，当使用伪元素 ":checked" 和相邻的兄弟选择器 "+" 选择附近的复选框时，您正在定义元素的样式。

我希望我有所帮助；）

推荐阅读