Удалить обертку div

Question

У меня есть маленький вопрос. Наше агентство работает с Drupal, но мы хотим изменить некоторые мелочи сами. Я разбираюсь в HTML / CSS, но не совсем в JS.

Теперь у меня проблема. Я вставляю свой HTML-код в контентную часть.

Это мой HTML-код:

<div class="accordion">          
    <div>
        <input type="radio" name="acc" id="question01" checked="">
        <label for="question01">question</label>
        <div class="accordion-content">
            <p>content</p>
        </div>
    </div>

Это должен быть аккордеон только с CSS. Он отлично работает локально, но в системе Drupal есть функция Javascript, которая добавляет элемент <div> вокруг <input>, поэтому мой CSS больше не работает, что означает, что я больше не могу открыть аккордеон.

HTML-код в Drupal:

<div class="accordion">
    <div>
        <div class="medium styledRadio" style="background-image: url(&quot;/assets/img/sprite-radiobuttons-medium.png&quot;); width: 23px; height: 24px; cursor: pointer; background-position: 0px 0px;">
            <input checked="checked" id="question01" name="acc" type="radio" class="medium" style="display: none;">
        </div> 
        <label for="question01">question</label>
        <div class="accordion-content">
            <p>content</p>
        </div>
    </div>

Итак, мой вопрос: есть ли простой способ переписать этот JavaScript? Возможно, есть краткое решение для удаления этого дополнительного <div> только в class="accordion", которое я могу добавить в этой части содержимого.

Answer 1

Добро пожаловать в переполнение стека!

У вас есть доступ к базе кода? Тогда загрузка и включение этого модуля, вероятно, будет большим помощником: CKEditor Accordion

Добавляет новую кнопку в встроенный CKEditor Drupal 8, который позволяет Пользователь может создавать и отображать любой тип контента в формате аккордеона.

---

Я попытался применить стандарты кодирования к вашим фрагментам кода и понял, что в обоих из них отсутствует закрывающий </div>. Это специально?

Используете ли вы модуль Big Pipe для кэширования, и эта проблема исчезает при его отключении? (Однажды я испытал нечто подобное, как объяснено здесь https://www.drupal.org/project/drupal/issues/2738685,, что подводит меня к следующему вопросу.)

Какую версию Drupal вы используете?

---

И последнее, но не менее важное: я хочу упомянуть, что все остальные ответы здесь просто пытаются вылечить симптомы, когда основной проблемой является JS, который добавляет дополнительный <div> в первую очередь. Но еще большая «проблема» в том, что вы пытаетесь сделать это в поле редактора. Который должен использоваться для контента, а не для функциональности.

Существует ряд проблем, которые возникают при попытке построить функции в текстовых полях. Нет подсветки кода, нет автоматического отступа, нет завершения кода. После того, как он закончен, он может быть легко сломан кем-то без ваших навыков Нет отслеживания версий, нет поиска и замены в базе кода, трудно развернуть в разных средах с разными базами данных.

Короче: не делай этого. Попробуйте упомянутый модуль. Или добавьте другой тип контента (возможно, «Элемент аккордеона», а затем отобразите эти узлы в Аккордеоне видов (функциональность аккордеона, примененного к представлению), а затем поместите представление с кратким кодом, предоставленным Вставить представление в любом месте содержимого, которое вы хотите.

Answer 2

Дополнительный div можно удалить с помощью jQuery. Я не уверен, что это то, что вы ищете. Тем не менее это может быть решение удалить лишний div

var content = $(".styledRadio").contents();
$(".styledRadio").replaceWith(content);