Question

是否有可能删除手风琴，但仍会在某个断点处显示内容？在此示例中，max-width为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类。因此，当再次调整窗口大小时，将显示先前显示的面板，并再次隐藏隐藏的面板。

显示手风琴内容

1 个答案: