AMP 电子邮件 - 用于创建条件菜单的 amp-selector答案

【问题标题】：AMP Email - amp-selector to create a conditional menuAMP 电子邮件 - 用于创建条件菜单的 amp-selector
【发布时间】：2020-06-27 18:33:11
【问题描述】：

有人知道如何在电子邮件中使用 amp-selector 进行条件隐藏吗？在这样的按钮上？因此，我有 3 个彼此相邻的按钮，菜单 1、菜单 2 和菜单 3。因此，如果单击 menu1，我只希望内容显示指向菜单 1 的链接。如果单击 menu2，我只想显示menu2 中的内容等等。

   <table>
     <tr>
       <th on="tap:menu1.hide;tap:menu1.toggleVisibility"  class="bg-indigo-500 hover:bg-indigo-600 rounded" style="mso-padding-alt: 12px 48px;">
         <a class="block text-white text-sm leading-full py-12 px-48 no-underline">Menu 1</a>
       </th>
     </tr>
   </table>


<amp-selector id="menu1" layout="container"  hidden>


  <amp-selector id="hide1" layout="container" name="single_image_select" >
    <ul>
      <li>
        <p  option="1"  select>   MENU1    </p>
          </li>
      <li>
          <p  option="2" hidden>   HEJ2    </p>
      </li>
      <li option="na" disabled>None of the Above</li>
    </ul>
  </amp-selector>
</amp-selector>

【问题讨论】：

标签： html-email amp-html amp-email

【解决方案1】：

您可以使用 AMP 电子邮件中的操作和事件来实现此目的。详情请见this URL。

下面是相同的测试代码：

<!doctype html>
<html ⚡4email>
<head>
<meta charset="utf-8">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>
  <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
  <script async custom-element="amp-selector" src="https://cdn.ampproject.org/v0/amp-selector-0.1.js"></script>

  <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
  <style amp4email-boilerplate>body{visibility:hidden} </style>
   <style amp-custom>
      /* any custom styles go here. */
      .hideme {
        visibility:hidden
      }
    </style>
</head>
<body>

  <button value="menu1" on="tap:menu1.toggleVisibility,menu2.hide,menu3.hide">menu1</button>
  <button value="menu1" on="tap:menu2.toggleVisibility,menu1.hide,menu3.hide">menu2</button>
  <button value="menu1" on="tap:menu3.toggleVisibility,menu1.hide,menu2.hide">menu3</button>
  
<div id="menu1">
  <h3>
     Menu1
  </h3>
  <amp-list
    width="auto"
    height="100"
    layout="fixed-height"
    src="https://preview.amp.dev/static/inline-examples/data/amp-list-urls.json"
   >

    <template type="amp-mustache">

      <div class="url-entry">
        <a href="{{url}}">{{title}}</a>
      </div>
    </template>
  </amp-list>
</div>    

<div id="menu2" hidden>
  <h3>
     Menu2
  </h3>
  <amp-list
    width="auto"
    height="100"
    layout="fixed-height"
    src="https://preview.amp.dev/static/inline-examples/data/amp-list-urls.json"
   >

    <template type="amp-mustache">

      <div class="url-entry">
        <a href="{{url}}">{{title}}</a>
      </div>
    </template>
  </amp-list>
</div>   

<div id="menu3" hidden>
  <h3>
     Menu3
  </h3>
  <amp-list
    width="auto"
    height="100"
    layout="fixed-height"
    src="https://preview.amp.dev/static/inline-examples/data/amp-list-urls.json"
   >

    <template type="amp-mustache">

      <div class="url-entry">
        <a href="{{url}}">{{title}}</a>
      </div>
    </template>
  </amp-list>
</div>   


</body>
</html>

Working Example in AMP Playground

【讨论】：