amp-html - 检查 amp-accordion 的 Selector-like？

Question

我想知道是否有一种方法可以根据所述手风琴的状态（即折叠或展开）来设置、显示/隐藏手风琴外部的元素。

我看到您可以根据状态在手风琴本身内设置内容样式，但还没有能力说：如果此手风琴空白已展开，请在此处隐藏此图像等。

Answer 1

这可以通过监听expandandcollapse事件来实现：

<amp-accordion>
    <section on="expand:myElement.show;
                 collapse:myElement.hide">
    ...

当任何这些事件被触发时，您可以触发任何AMP 的内置操作，例如toggle(show/hide) 或toggleClass。

这是一个完整的例子：

  <amp-accordion>
    <section on="expand:myElement.show;
                 collapse:myElement.hide">
      <h2>
        Toggle Visibility
      </h2>
      <div>
        Content 1
      </div>
    </section>
    <section on="expand:myOtherElement.toggleClass(class='red');
                 collapse:myOtherElement.toggleClass(class='red')">
      <h2>
        Toggle Class
      </h2>
      <div>
        Content 2
      </div>
    </section>
  </amp-accordion>

  <div id="myElement" hidden>
    Element 1
  </div>
  <div id="myOtherElement">
    Element 2
  </div>