手風琴按鈕內<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 標簽。