amp-accordion ссылка на заголовок раздела

Question

В меню страницы AMP у нас есть несколько разделов с любыми детьми. В этом случае мы хотели бы напрямую ссылаться на заголовок раздела. Мы не могли этого сделать. Любая помощь/указатели в этой области будет с благодарностью. Например, в следующем коде хотелось бы ссылаться на «Вложенный раздел 2.1», нажав на который следует перейти непосредственно на целевую страницу (и не открыть раздел).

<amp-accordion> 
<section> 
    <h4>Section 1</h4> 
    <p>Bunch of content.</p> 
</section> 
<section> 
    <h4>Section 2</h4> 
    <amp-accordion class="nested-accordion"> 
    <section> 
     <h4>Nested Section 2.1</h4> 
     <p>Bunch of content.</p> 
    </section> 
    <section> 
     <h4>Nested Section 2.2</h4> 
     <p>Bunch of more content.</p> 
    </section> 
    </amp-accordion> 
</section> 

Answer 1

Я на самом деле очень мало знаю о страницах AMP и до сих пор пытаются узнать больше об этом, но на основе из AMP's official documentation, поведение amp-accordion «сек являются следующие:

• Ампер-аккордеон может содержать один или несколько <section> s в качестве своих прямых детей.
• Каждый <section> должен содержать ровно двух прямых детей.
• Первый ребенок (секции) должен быть одним из h1, h2, ..., h6, заголовка и является заголовком раздела.
• Второй ребенок (раздела) может быть любым тегом, разрешенным в AMP HTML, и является содержимым раздела.
• Нажатие/постукивание по заголовку раздела расширяет/или сворачивает раздел.

Вы можете также проверить 10 Important Accelerated Mobile Pages (AMP) Components You Should Know полезные идеи.

Надеюсь, что это поможет!

Answer 2

Не размещайте эти разделы в гармошку и соответствовать их стилю аккордеона заголовки и т.д .:

<amp-accordion> 
<section> 
    <h4>Section 1</h4> 
    <p>Bunch of content.</p> 
</section> 
<section> 
    <h4>Section 2</h4> 

    <div> 
    <h4><a href="...">Nested Section 2.1</a></h4> 
    <amp-accordion class="nested-accordion"> 
     <section> 
     <h4>Nested Section 2.2</h4> 
     <p>Bunch of more content.</p> 
     </section> 
    </amp-accordion> 
    </div> 

</section>