html - 显示 Accordion 内容

Question

是否可以在某个断点处删除 Accordion 但仍显示内容？在此示例中，最大宽度为 1000px。

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
    acc[i].onclick = function(){
        this.classList.toggle("active");
        this.nextElementSibling.classList.toggle("show");
  }
}

button.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
}

button.accordion.active, button.accordion:hover {
    background-color: #ddd;
}

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

div.panel.show {
    opacity: 1;
    max-height: 500px;  
}

/* BREAK POINT WHERE ACCORDION CONTENT SHOULD SHOW AND BUTTON DISSAPEAR */
@media (min-width: 1000px) { 
	button {display: none;}
}

<h2>Animated Accordion</h2>

<button class="accordion">Section 1</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="accordion">Section 2</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="accordion">Section 3</button>
<div id="foo" class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

http://www.w3schools.com/code/tryit.asp?filename=FAPRC04352Z8

如果我打开按钮，并展开它工作的窗口。

Answer 1

您走在正确的轨道上。只需覆盖所有可能隐藏面板内容的属性 ( modified code on w3schools ):

@media (min-width: 1000px) { 
    button {display: none;}
    div.panel { opacity: 1; max-height: none}
}

通过使用此解决方案(仅使用 CSS)，您还可以在面板上保留 .show 类。因此，当再次调整窗口大小时，您之前显示的面板会显示出来，而隐藏的面板会再次隐藏。