javascript - Accordion 按钮未隐藏文本

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

您的段落是绝对定位的，但与隐藏/显示的面板无关。要将那些相对于 .panel 定位，请将 position: relative 添加到 .panel，然后段落将使用 `.panel.< 隐藏/显示/p>