浮動水平手風琴

Question

我該如何解決它，下面的div打開，3個標籤總是保持在同一位置？ div不應該在選項卡之間打開，但在下面。三個標籤應該始終並排。這有可能嗎？任何幫助將不勝感激。謝謝。

var acc = document.getElementsByClassName("menu-tabs"); 
 
var i; 
 

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

button.menu-tabs { 
 
    background-color: #fff; 
 
    border-color: #EB282C; 
 
    border-bottom: 1px solid #ddd; 
 
    margin-left: 0; 
 
    list-style: none; 
 
    float: left; 
 
    margin-bottom: -1px; 
 
    position: relative; 
 
    display: block; 
 
} 
 

 
button.menu-tabs.active, button.menu-tabs: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; 
 
    float: none; 
 
} 
 

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button class="menu-tabs">tab 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="menu-tabs">tab 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="menu-tabs">tab 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>

Answer 1

它會更容易通過改變你的HTML結構來解決你的問題。

下面是修改後的版本與切換基於一對按鈕的ID/DIV類（我也是在CSS去掉了一些「浮碼」）：

var acc = document.getElementsByClassName("menu-tabs"); 
 
var i; 
 

 
for (i = 0; i < acc.length; i++) { 
 
    acc[i].onclick = function(){ 
 
    // toggle this button, make others inactive 
 
    var buttons = document.getElementsByClassName("menu-tabs"); 
 
    for (i = 0; i < buttons.length; i++) { 
 
     if (buttons[i] == this) { 
 
     buttons[i].classList.toggle("active"); 
 
     } 
 
     else { 
 
     buttons[i].classList.remove("active"); 
 
     } 
 
    } 
 
    // toggle panel associated to this, hide the others 
 
    var panels = document.getElementsByClassName("panel"); 
 
    for (i = 0; i < panels.length; i++) { 
 
     if (panels[i].classList.contains(this.id)) { 
 
     panels[i].classList.toggle("show"); 
 
     } 
 
     else { 
 
     panels[i].classList.remove("show"); 
 
     } 
 
    } 
 
    } 
 
}

button.menu-tabs { 
 
    background-color: #fff; 
 
    border-color: #EB282C; 
 
    border-bottom: 1px solid #ddd; 
 
    margin-left: 0; 
 
    list-style: none; 
 
    margin-bottom: -1px; 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
button.menu-tabs.active, button.menu-tabs: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; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <button class="menu-tabs" id="tab1">tab 1</button> 
 
    <button class="menu-tabs" id="tab2">tab 2</button> 
 
    <button class="menu-tabs" id="tab3">tab 3</button> 
 
</div> 
 

 
<div class="panel tab1"> 
 
    <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> 
 

 
<div class="panel tab2"> 
 
    <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> 
 

 
<div id="foo" class="panel tab3"> 
 
    <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>