显示手风琴内容

Question

是否可以在某个断点处移除手风琴但仍显示内容？在这个例子中，最大宽度为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) { 
 
\t 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类。因此，当再次调整窗口大小时，将显示先前显示的面板，并再次隐藏隐藏的面板。