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属性的信息

＆＃13;

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";
        } 
      }
    }

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 3

您必须更改此js行：

var panel = this.nextElementSibling;

为此：

var panel = this.parentNode.nextElementSibling;

选择 nextElementSibling 函数尝试获取按钮后的下一个html对象。如果你在按钮标签内有h2标签，那么下一个标签是带有面板类的div标签，但是如果你在H2标签内移动了Button，那么Button是最后一个对象而 nextElementSibling 函数什么也不返回。

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

<h2>中的accordion按钮无法打开或关闭

HTML：

JS：

CSS：

3 个答案: