#javascript #php #twitter-bootstrap #typo3
#язык JavaScript #php #твиттер-загрузчик #опечатка3
Вопрос:
моя первоначальная проблема заключалась в том, что все мои аккордеоны открывались одновременно, но я понимал, что это исходило от идентификатора, который все время был одним и тем же.
Поэтому я попытался сделать свой идентификатор динамичным, но это не решило мою проблему. не могли бы вы предложить решение, пожалуйста? Спасибо
вот мой код:
lt;div class="accordion mb-5" id="accordion-infos"gt; lt;f:for each="{field.container}" as="container"gt; lt;!-- foreach bouton contenu --gt; lt;div class="card"gt; lt;div class="card-header" id="heading1-{container.buttoncontent}"gt; lt;h2gt; lt;button class="accordion-button btn btn-link btn-block text-left" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne-{container.buttoncontent}" aria-expanded="true" aria-controls="collapseOne-{container.buttoncontent}"gt; {container.buttoncontent} lt;/buttongt; lt;/h2gt; lt;/divgt; lt;div id="collapseOne-{container.buttoncontent}" class="accordion-collapse collapse" aria-labelledby="heading1-{container.buttoncontent}" data-bs-parent="#accordion-infos"gt; lt;div class="card-body"gt; lt;div class="section-card"gt; lt;div class="row"gt; lt;div class="col-lg-6 col-md-6"gt; lt;f:format.rawgt;{container.content}lt;/f:format.rawgt; lt;/divgt;lt;!-- col-lg-6 col-md-6--gt; lt;/divgt;lt;!-- row--gt; lt;/divgt;lt;!-- section card --gt; lt;/divgt; lt;!-- card body --gt; lt;/divgt; lt;!-- collapsOne --gt; lt;/divgt; lt;!-- card --gt; lt;/f:forgt;lt;!-- endfor bouton contenu--gt; lt;/divgt;lt;!-- accordion mb-5 --gt; Комментарии:
1. «Поэтому я попытался сделать свой идентификатор динамичным, но это не решило мою проблему». — почему / как нет? Мы не знаем, какие данные вы на самом деле вводите в показанный шаблон, так как мы должны знать, какой результат это на самом деле дало сейчас?
2. «Поэтому я попытался сделать свой идентификатор динамичным, но это не решило мою проблему». я имел в виду, что мой аккордеон больше не открывался, когда я добавлял динамический контент в свой идентификатор, я хотел добавить в свой идентификатор имя кнопки моего аккордеона
3. Итак, как выглядит сгенерированный HTML-источник? Все идентификаторы там установлены так, как вы думали, что они должны быть?
4. «Я хотел добавить в свой идентификатор имя моей кнопки аккордеона» — и как выглядят эти имена? Являются ли они на самом деле значениями, которые при наличии префикса
something-все равно приводят к допустимому значению идентификатора в HTML?5. Когда я просматриваю HTML с помощью идентификатора динамики, я получаю, что » lt;div id=»collapseOne-vie pratique» класс=»аккордеон-коллапс коллапс» aria-labelledby=»heading1-vie pratique» данные-bs-родитель=»#аккордеон-информация»gt; » Таким образом, я правильно получаю свои значения, но мой аккордеон не работает
Ответ №1:
использование любого редактируемого текста в качестве идентификатора с ограничениями в целом является плохой идеей. для аккордеонов или аналогичной конструкции вы всегда должны использовать uid from TYPO3. Или, по крайней мере iterator.index , петли.
Поскольку у вас может быть несколько аккордеонов на одной странице, вам следует объединить их.
таким образом, ваш идентификатор должен состоять uid из контейнера и uid s содержащихся в нем элементов.
Что-то вроде: id="container-{data.uid}-{element.uid}"
или
lt;f:for each="{field.container}" as="container" iteration="iterator"gt; : lt;div class="card-header" id="container-{data.uid}-{iterator.index}"`gt; : lt;div id="collapseOne-{data.uid}-{iterator.index}" ... :