删除包装 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 函数，它在 <input> 周围添加了一个 <div> 元素，所以我的 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？也许有一个简短的解决方案可以删除class="accordion" 中的这个额外的<div>，我可以在这个内容部分添加它。

Answer 1

可以使用 jQuery 删除多余的 div。我不确定这是否是您要查找的内容。仍然可以解决删除多余的 div

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

Answer 2

欢迎来到 Stack Overflow！

您可以访问代码库吗？那么下载并启用这个模块可能会是一个很大的帮助：CKEditor Accordion

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

---

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

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

您使用的是哪个版本的 Drupal？

---

最后但并非最不重要的一点是，当根本问题是首先添加额外 <div> 的 JS 时，这里的所有其他答案都只是试图治愈症状。但更大的“问题”是你正试图在编辑器领域做到这一点。应该用于内容，而不是功能。

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

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