Ul列表中的可折叠按钮在jsfiddle中可用，但在wp中不可用。

时间：2019-09-12 作者：sound wave

我实现了一个可折叠按钮，它在WP中运行良好，但如果我将其插入ul 列出它不工作，即按钮未打开。

然后，我尝试在JSFIDLE中运行代码，它确实起到了作用。

WP代码和JSFIDLE代码之间的唯一区别在于javascript

WP上的var content 定义为this.parentElement.nextElementSibling;var content 定义为this.nextElementSibling;

通过移除parentElement 在WP上，按钮将通过添加parentElement 在JSFIDLE上，按钮将断开仅供参考，WP上的javascript加载在页脚中。

有可能解决这个问题吗？这是jsfiddle demo.

下面您可以看到JSFIDLE vs WP

enter image description hereenter image description here

来自CHROME INSPECT TOOL的HTML

<div class="entry-content">
        <p>Does <button class="col">this</button> work?</p>
<div class="con space" style="">
<p>Yes!</p>
<p></p></div>
<hr>
<ul>
<li>Does <button class="col">this</button> work?
<div class="con space">
<p>Only in jsfiddle, not in WP!</p>
</div>
</li>
<li style="">another line</li>
</ul>
    </div>
来自WP CLASSIC EDITOR的HTML
Does <button class=col>this</button> work?
<div class="con space"><p>Yes!<p/></div>

<hr>

<ul>
  <li>Does <button class=col>this</button> work?
      <div class="con space"><p>Only in jsfiddle, not in WP!</p></div></li>
  <li>another line</li>
</ul>
Thespace 类仅包含margin-bottom: 1.5em;

1 个回复
最合适的回答,由SO网友:sound wave 整理而成

Steven提供的解决方案

<script type="text/javascript">
( function() {
    coll = document.getElementsByClassName("col");
    conn = document.getElementsByClassName("con");
    var i;
    for (i = 0; i < coll.length; i++) {
        coll[i].setAttribute(\'data-id\', \'con\' + i);
        conn[i].setAttribute(\'id\', \'con\' + i);
        coll[i].addEventListener("click", function() {
            this.classList.toggle("active");
            var content = document.getElementById(this.getAttribute(\'data-id\'));
            if (content.style.maxHeight) {
                content.style.maxHeight = null;
            } else {
                content.style.maxHeight = content.scrollHeight + "px";
            }
        });
    }
} )();
</script>

标签： css   javascript   小码农  

相关推荐

Style.css不起作用，但定制器附加的css起作用了吗？

我在我的网站上使用一个woocommerce模板，当我添加一些额外的CSS时，它不会显示出来，但当我将相同的代码放入定制器时，wordpress中的额外CSS工作正常。我已经在原始主题上进行了测试，还制作了一个儿童主题，但仍然不起作用。有人知道发生了什么事吗？你好，比利