手风琴按钮内<h2>无法打开或关闭

Question

手风琴工作正常，直到我将<h2>标签移到按钮之外，因为它没有通过 html5 验证。

我对 javascript 不太了解，在 w3schools 网站上找到了代码。 当<h2>标签位于<button>标签内时，它工作得很好。

HTML：

<h2><button class="accordion" id="uses">Lorem ipsum</button></h2>
<div class="panel">
    <div class="accordioncontent">
        <h3>Lorem ipsum...</h3>
    </div>
</div>

JS：

<script type="text/javascript">
    var acc = document.getElementsByClassName("accordion");
    var i;
    for (i = 0; i < acc.length; i++) {
      acc[i].onclick = function() {
        this.classList.toggle("active");
        var panel = this.nextElementSibling;
        if (panel.style.maxHeight){
          panel.style.maxHeight = null;
        } else {
          panel.style.maxHeight = panel.scrollHeight + "px";
        } 
      }
    }
</script>

CSS：

h2 button.accordion {
    display: inline-block;
    float: left;
    width: 100%;
    font-size: 43px;
    font-family: 'Open Sans', sans-serif;
    text-align: left;
}


button.accordion:after {
    content: '\02795';
    font-size: 25px;
    float: right;
    margin-top: 16px;
}

button.accordion.active:after {
    content: "\2716";
}

div.panel {
    width: 880px;
    max-height: 0;
    margin: 0 auto;
    background-color: white;
    overflow: hidden;
}

.accordioncontent {
    padding: 18px 25px;
    min-height: 250px;
}

Answer 1

检查您的 CSS，您使用的是 h2 标签。

h2 button.accordion {
    display: inline-block;
    float: left;
    width: 100%;
    font-size: 43px;
    font-family: 'Open Sans', sans-serif;
    text-align: left; 
}

Answer 2

错误是由于这一行： this.nextElementSibling;

h2位于按钮内，元素按钮的兄弟元素是具有 .panel 类的 div。 一旦将按钮放在h2 ， nextElementSibling它就找不到同级元素，因为它是元素中唯一的子元素。

你应该把这一切想象成一棵树

Document
+-H2
| +-Button
+-div.panel

检查有关 DOM 树的信息https://www.w3schools.com/js/js_htmldom.asp以及有关元素的 nextElementSibling https://www.w3schools.com/jsref/prop_element_nextelementsibling.asp属性如何工作的信息

 var acc = document.getElementsByClassName("accordion"); var i; for (i = 0; i < acc.length; i++) { acc[i].onclick = function() { this.classList.toggle("active"); console.dir(this); <!--No siblings for button inside h2 element--> console.dir(this.nextElementSibling); <!--Existing sibling for parent Node--> var panel = this.parentNode.nextElementSibling; if (panel.style.maxHeight){ panel.style.maxHeight = null; } else { panel.style.maxHeight = panel.scrollHeight + "px"; } } }

 h2 button.accordion { display: inline-block; float: left; width: 100%; font-size: 43px; font-family: 'Open Sans', sans-serif; text-align: left; } button.accordion:after { content: '\\02795'; font-size: 25px; float: right; margin-top: 16px; } button.accordion.active:after { content: "\\2716"; } div.panel { width: 880px; max-height: 0; margin: 0 auto; background-color: white; overflow: hidden; } .accordioncontent { padding: 18px 25px; min-height: 250px; }

 <h2><button class="accordion" id="uses">Lorem ipsum</button></h2> <div class="panel"> <div class="accordioncontent"> <h3>Lorem ipsum...</h3> </div> </div>

Answer 3

您必须更改此 js 行：

var panel = this.nextElementSibling;

为了这：

var panel = this.parentNode.nextElementSibling;

因为nextElementSibling函数尝试在按钮之后获取下一个 html 对象。 如果您在按钮标签内有 h2 标签，那么下一个标签是带有面板类的 div 标签，但如果您将 Button 移动到 h2 标签内，则 Button 是最后一个对象，并且nextElementSibling函数不返回任何内容。

在nextElementSibling函数之前调用parentNode函数将返回按钮的父级之后的下一个对象。 在这种情况下，按钮标签的父对象是 h2 标签，h2 标签之后的下一个对象是带有面板类的 div 标签。