手风琴按钮未隐藏的文字

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位置，但与隐藏/显示的面板无关。要将.panel相对于position: relative放置，请将.panel添加到private void authorDataGridView_CellClick(object sender, DataGridViewCellEventArgs e) { if (authorDataGridView.Rows[e.RowIndex].Cells[e.ColumnIndex].Value != null) { MessageBox.Show("Author Number: " + authorDataGridView.Rows[e.RowIndex].Cells[0].Value.ToString() + "\nAuthor First Name: " + authorDataGridView.Rows[e.RowIndex].Cells[1].Value.ToString() + "\nAuthor Last Name: " + authorDataGridView.Rows[e.RowIndex].Cells[2].Value.ToString()); } } ，并使用`.panel隐藏/显示段落。