jquery - 水平 float Accordion

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 中的一些“ float 代码”):

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>