Question

示例链接：https://amp-html.firebaseapp.com/

我想在其他<amp-accordion>中使用<amp-accordion>，但是当我尝试显示和隐藏第二个手风琴时我遇到了问题，可能它的切换功能不能很好地工作。

这是我的代码

CSS：

<style amp-custom>
  section[expanded] .show-more {
    display: none;
  }
  section:not([expanded]) .show-less {
    display: none;
  }
  .container {
      text-align: center;
      padding: 100px;

  }
  .title {
      background-color: #7eaba9;
  }
  section {
      text-align: center;
  }
 </style>

HTML：

<div class="container">
      <amp-accordion >
          <section expanded>
            <h4>Section expanded</h4>
            <p>Bunch of awesome content.</p>
          </section>
          <section>
            <header>
                <h4>
                    <span class="show-more">Section no expanded</span>
                    <span class="show-less">Section expanded</span>
                </h4>
            </header>
            <amp-accordion>
                <section expanded>
                  <h4 class="title">
                    <span class="show-more">Show more</span>
                    <span class="show-less">Show less</span>
                  </h4>
                  <p>Id lacus amet. Aliquam eos nunc ut scelerisque ...
                    in eu wisi. </p>
                </section>
            </amp-accordion>
          </section>
    </amp-accordion>
  </div>

Answer 1

问题：当嵌套的amp-accordion可见时，它已经在它的父级手风琴的扩展部分内。

   <amp-accordion >
        <section **expanded**>
        ...
          <amp-accordion>
            <section>
              <h4 class="title">
                <span class="show-more">Show more</span>
                <span class="show-less">Show less</span>
              </h4>
              ...
            </section>
          </amp-accordion>
        </section>
      </amp-accordion>

这意味着css规则：

section[expanded] .show-more {
  display: none;
}

将始终隐藏嵌套的amp-accordion的标题。您可以通过明确选择跨度来解决此问题：

  section[expanded] > h4 > .show-more {
    display: none;
  }
  section:not([expanded]) > h4 > .show-less {
    display: none;
  }

为此，您的所有手风琴标题应具有相同的结构：

<div class="container">
  <amp-accordion >
    <section expanded>
      <h4>Section expanded</h4>
      <p>Bunch of awesome content.</p>
    </section>
    <section>
      <h4>
        <span class="show-more">Section no expanded</span>
        <span class="show-less">Section expanded</span>
      </h4>
      <amp-accordion>
        <section >
          <h4 class="title">
            <span class="show-more">Show more</span>
            <span class="show-less">Show less</span>
          </h4>
          <p>Id lacus amet. Aliquam eos nunc ut scelerisque ...
          in eu wisi. </p>
        </section>
      </amp-accordion>
    </section>
  </amp-accordion>
</div>

其他功放手风琴中的Amp-accordion无法正常工作

1 个答案: