accordion button unhidden text

Question

嗨我建立一個按鈕隱藏/顯示內容時點擊，但是當我應用一些風格的內容，它不會隱藏了，我懷疑它有一些與css位置有關，但無法弄清楚爲什麼，有人可以幫我嗎？由於事先

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

button.accordion { 
 
    background-color: #13294b; 
 
    border: 2px solid #59cbe8; 
 
    border-radius: 0px 10px 0px 10px; 
 
    box-shadow: 7px 7px 5px #cccccc; 
 
    color: #fff; 
 
    cursor: pointer; 
 
    padding: 10px 15px 10px 15px; 
 
    margin: 4px 0px 7px 0px; 
 
    width: 100%; 
 
    font-size: 18px; 
 
    transition: 0.4s; 
 
    outline: none; 
 
    text-align: left; 
 
    } 
 
    
 
    button.accordion.active, button.accordion:hover { 
 
    background-color: #1f447b; 
 
    } 
 

 
    button.accordion:after { 
 
    content: '\002B'; 
 
    color: #59cbe8; 
 
    font-weight: bold; 
 
    float: right; 
 
    } 
 

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

 
    .panel { 
 
    padding: 0 18px; 
 
    background-color: white; 
 
    max-height: 0; 
 
    overflow: hidden; 
 
    transition: max-height 0.2s ease-out; 
 
    } 
 

 
    .action1 { 
 
    position: absolute; 
 
    margin-top: -115px; 
 
    margin-left: 35px; 
 
    width: 100%; 
 
    color: #c1c1c1; 
 
    font-size: 14px; 
 
    font-weight: bold; 
 
    } 
 

 
    .action2 { 
 
    position: absolute; 
 
    margin-top: -115px; 
 
    margin-left: 175px; 
 
    width: 100%; 
 
    color: #c1c1c1; 
 
    font-size: 14px; 
 
    font-weight: bold; 
 
    }

<button class="accordion">This is the button</button> 
 
    <div class="panel"> 
 
    <p><img width="650" height="114" style="border: 0px solid rgb(0, 0, 0); border-image: none;" src="./?a=654193" /><br /></p> 
 
    <p class="action1">Recognise</p> 
 
    <p class="action2">Remove from play</p> 
 
    </div>

Answer 1

你的段落中absolute LY地定位，而不是相對於被隱藏/顯示面板。要定位相對於.panel的那些，請將position: relative添加到.panel，段落將使用`.panel隱藏/顯示。