Как сделать усилитель-аккордеон с множественным потомком (у какого-то ребенка будет внук)

Я пытаюсь реализовать усилитель-аккордеон на моей странице усилителя. В соответствии с требованием у какого-то предмета моего аккордеона будет внук.

Делал ли кто-нибудь что-нибудь подобное. Я пытаюсь добавить некоторый элемент в последний пример на этой странице https://ampbyexample.com/components/amp-accordion/#nested-accordions на игровой площадке. Это всегда заканчивается неверным кодом. Как я могу сделать аккордеон, который будет работать с ребенком и внуком (2 ребенка ребенка)

Код для 1-уровневой вложенности

<amp-accordion disable-session-states>
  <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>
</amp-accordion>

html amp-html
person Anirudha Gupta    schedule 26.02.2018    source источник
comment
пожалуйста, поделитесь своим кодом   -  person Bachcha Singh    schedule 26.02.2018

Ответы (3)


arrow_upward
1
arrow_downward

Какую ошибку вы получаете?

Причина может заключаться в том, что внутри тега section больше двух дочерних элементов. Каждый раздел должен иметь ровно двух дочерних элементов. В качестве обходного пути вы можете обернуть другие элементы внутри div, чтобы у вас могло быть только 2 дочерних элемента.

введите здесь описание изображения

Позднее редактирование: у вас может быть A (в нашем случае h4) и B (в нашем случае div), которые включают C, D, E,...

<amp-accordion disable-session-states>
    <section>
        <h4>Section</h4>
        <div class="wrap-list">
            <ul>
              <li>1</li>
              <li>2</li>
              <li>3</li>
            </ul>
        </div>
     </section>
 </amp-accordion>
person julia    schedule 26.02.2018
comment
@Zedka, это именно та проблема, с которой я столкнулся, у меня есть ABC, у которого может быть их ребенок. Эта вещь не соответствует требованию. - person Anirudha Gupta; 26.02.2018
comment
Попробуйте обернуть дополнительных дочерних элементов внутри другого элемента, как в приведенном выше примере. - person julia; 26.02.2018

arrow_upward
1
arrow_downward

Попробуйте эту последовательность (если я правильно понял вашу проблему)

<amp-accordion>
  <section>
    <h4>Your title here</h4>
    <div>
      <amp-accordion> <!-- your first level child here -->
        <section>
          <h4>Your first level child title here</h4>
          <div>
            <amp-accordion> <!-- your second level child here -->
              <section>
                <h4>your second child title-1 here</h4>
                <div>...</div>
              </section>
              <section>
                <h4>your second child title-2 here</h4>
                <div>...</div>
              </section>
            </amp-accordion>
          </div>
        </section>
      </amp-accordion>
    </div>
  </section>
</amp-accordion>

и так далее и тому подобное...

person Alexander Grosul    schedule 27.02.2018

arrow_upward
0
arrow_downward

Почему бы просто не использовать флажок для переключения отображения/скрытия?

person Hai Bui    schedule 27.02.2018
comment
Это панель навигации, проверьте TheGuardian. Моя реализация очень похожа на эту, но в реализации у меня есть дочерние элементы. В этом случае использование Checkbox будет странным. - person Anirudha Gupta; 27.02.2018
comment
Проверьте мой бывший: rawgit.com/buihoanghai/html-only/master/accordion. html - person Hai Bui; 28.02.2018
comment
Уровень 0 с помощью радио, уровень 1 с помощью флажка - person Hai Bui; 28.02.2018
comment
Я ухожу в отпуск, я приеду на следующей неделе, Если у меня будет подключение к интернету, я обязательно попробую ваш пример. Спасибо за помощь, :) - person Anirudha Gupta; 28.02.2018