时间戳

首页 > 解决方案 > 浮动下拉元素相互向右推

javascript - 浮动下拉元素相互向右推

问题描述

我正在开发一个项目，其中一页上有多个下拉菜单。为了让这些下拉菜单按顺序使用，我使用左浮动，问题是当我打开左边的下拉菜单之一时，它会将其中一些推到右边。需要发生的是打开下拉菜单下方的下拉菜单需要向下移动，而不是移动到另一侧。

我曾尝试使用“clear: both”和“Overflow: auto”，但这些都不起作用。

这是一个 JSFiddle：https ://jsfiddle.net/p85ga09f/

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

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    }
  });
}
* {
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
}

.accordion_holder {
  border-bottom: 1px dashed #eaeaea;
  width: 48%;
  float: left;
  margin: 0 1%;
}

.accordion {
  background-color: #fff;
  color: #444;
  cursor: pointer;
  padding: 18px;
  padding-bottom: 30px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 1.125rem;
  font-weight: 200;
  transition: 0.4s;
}

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

li {
  line-height: 28px;
}

i {
  margin-right: 10px;
}

li,
a {
  color: #FF4212;
  text-decoration: none;
}

ul {
  margin: 0;
  margin-bottom: 5px;
}
<div class="content">
  <div class="accordion_holder">
    <button class="accordion">
      Placeholder 1
    </button>
    <div class="panel">
      <ul>
        <a href="#" target="_parent">
          <li>test</li>
        </a>
        <a href="#" target="_parent">
          <li>tset</li>
        </a>
      </ul>
    </div>
  </div>
  <div class="accordion_holder">
    <button class="accordion">
      Placeholder 2
    </button>
    <div class="panel">
      <ul>
        <li>
          test
        </li>
        <li>
          test
        </li>
        <li>
          test
        </li>
      </ul>
    </div>
  </div>
  <div class="accordion_holder">
    <button class="accordion">
      Placeholder 3
    </button>
    <div class="panel">
      <ul>
        <li>
          test
        </li>
        <li>
          test
        </li>
      </ul>
    </div>
  </div>
</div>

下拉菜单需要保留在其行和列上。

任何帮助，将不胜感激。

标签： javascriptjqueryhtmlcss

解决方案

在每行的左侧手风琴按钮上使用“clear：left”应该可以解决您的问题。因此，在我的情况下，使用“clear：left”向占位符 3 添加一个类。

编辑：正如其他人所建议的那样；这是一个快速修复，如果您只有几个按钮，它应该可以工作。对于较大的手风琴，我建议改用 Flexbox 或 Grid。

推荐阅读