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不再起作用，这意味着我无法再打开手风琴了。

Drupal中的HTML：

<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

可以使用jQuery删除多余的div。我不确定这是您要找的东西。仍然可以删除多余的div

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

Answer 2

欢迎堆栈溢出！

您可以访问代码库吗？然后下载并启用此模块可能会非常有帮助：CKEditor Accordion

为Drupal 8的CKEditor内置按钮添加了一个新按钮，用户以手风琴格式创建和显示任何类型的内容。

我尝试将编码标准应用于您的代码段，并意识到它们都缺少结尾</div>。这是故意的吗？

您是否使用Big Pipe模块进行缓存，并且在禁用它时此问题会消失吗？（我曾经经历过类似https://www.drupal.org/project/drupal/issues/2738685的解释，这使我想到了下一个问题。）

您正在使用哪个版本的Drupal？

最后但并非最不重要的一点是，我想提一下，当根本问题是JS首先添加了额外的<div>时，此处的所有其他答案都只是试图治愈症状。但是更大的“问题”是您正在尝试在编辑器字段中执行此操作。应该用于内容而非功能。

当您尝试在文本字段中构建功能时，会出现许多问题。没有代码突出显示，没有自动缩进，没有代码完成。一旦完成，没有您技能的人可以很容易地将其破坏。没有版本跟踪，没有在代码库中进行搜索和替换，难以部署到具有不同数据库的不同环境中。

简而言之：不要那样做。试用上述模块。或添加其他内容类型（可能是“手风琴项”，然后在Views Accordion中显示这些节点（应用于视图的手风琴功能），然后将视图与Insert View提供的短代码一起放在视图中的任何位置。您想要的内容。

删除包装器div

2 个答案: