javascript - 当左边的 div 向下滑动时，右边的 div 被推到它下面。我怎样才能让他们留在正确的地方？

Question

我有一个从屏幕顶部向下滑动的菜单。此菜单有 2 个按钮，单击时它们会从顶部菜单的底部向下滑动自己的菜单。

我遇到的问题是单击右键时，其下拉菜单将左侧下拉菜单推到其正确位置下方。这会在主下拉菜单和右侧下拉菜单之间创建一个间隙，如图所示。

我认为这里的问题可能与菜单向下滑动时显示属性从无变为阻塞有关。但是，我尝试将两个下拉菜单都设置为 inline-block 无济于事。

举个例子，我无法让它在 JSFiddle 中运行，但它在本地运行得很好。

有谁知道如何让左右下拉菜单都处于正确的高度(附在主下拉菜单的底部)？

这是我的代码:

(function($) {
  $(document).ready(function() {
    $('.selector').click(function() {
      $('.dropDown').slideToggle(300);
      $('#dropArrow').toggleClass('glyphicon-arrow-up glyphicon-arrow-down');
    });

    $("#infoButton").click(function() {
      $('#infoDiv').slideToggle(300);
    });

    $("#searchButton").click(function() {
      $('#searchDiv').slideToggle(300);
    });
  });
})(jQuery);

body {
  margin: 0;
  padding: 0;
}
.dropDown {
  padding: 10px;
  background: black;
  display: none;
  position: relative;
  width: 70%;
  height: 70px;
  margin: 0 auto;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  color: white;
  box-shadow: 2px 2px 10px rgb(51, 51, 51);
  clear: both;
  z-index: 100;
}
.selector {
  text-align: center;
  position: absolute;
  transform: scaleX(1.5);
  padding: 4px;
  left: 49%;
  background-image: -moz-linear-gradient(center top, rgb(219, 79, 0), rgb(255, 185, 95));
  box-shadow: 2px 2px 10px rgb(51, 51, 51);
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  cursor: pointer;
  width: 24px;
  height: 24px;
  color: white;
  z-index: 100;
}
#leftDrop {
  float: left;
  text-align: center;
  width: 33%;
  margin-top: 20px;
}
#rightDrop {
  float: right;
  text-align: center;
  width: 33%;
  margin-top: 20px;
}
#centerDrop {
  margin: 0 auto;
  text-align: center;
  width: 33%;
}
.dropButtonLeft {
  transform: scale(1.6, 1.6);
  padding: 8px;
  margin-left: 25px;
  margin-top: -6px;
  float: left;
  cursor: pointer;
}
.dropButtonRight {
  transform: scale(1.6, 1.6);
  padding: 8px;
  margin-right: 25px;
  margin-top: -6px;
  float: right;
  cursor: pointer;
}
#infoDiv {
  padding: 10px;
  background-color: rgba(34, 34, 34, 0.8);
  display: none;
  position: relative;
  width: 20%;
  height: 18%;
  margin-left: 16%;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  color: white;
  box-shadow: 2px 2px 10px rgb(51, 51, 51);
  clear: both;
  z-index: 100;
  text-align: center;
  padding-left: 1%;
}
#searchDiv {
  padding: 10px;
  background-color: rgba(34, 34, 34, 0.8);
  display: none;
  position: relative;
  width: 20%;
  height: 18%;
  margin-left: 64%;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  color: white;
  box-shadow: 2px 2px 10px rgb(51, 51, 51);
  clear: both;
  z-index: 100;
  text-align: center;
  padding-left: 1%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

  <div class='dropDown'>
    <div id='leftDrop'>
      <span id="infoButton" class="glyphicon glyphicon-info-sign dropButtonLeft" aria-hidden="true"></span>
    </div>
    <div id='rightDrop'>
      <span id="searchButton" class="glyphicon glyphicon-search dropButtonRight" aria-hidden="true"></span>
    </div>
    <div id='centerDrop'>
      Main Dropdown
    </div>
  </div>

  <div class='selector'>
    <span id="dropArrow" class="glyphicon glyphicon-arrow-down" aria-hidden="true"></span>
  </div>

  <div id="infoDiv">
    Left Dropdown
  </div>

  <div id="searchDiv">
    Right Dropdown
  </div>

Answer 1

来自 Chrome 检查器的快速 gif:

Some tips...

• The blue is the element
• The green is the padding
• The orange is the margin

---

发生了什么事？

每个元素都占据了它所在的整条“线”，因为它们是 block 元素。有几件事可以改变这种行为，即使用 CSS Floats。

---

在您的#infoDiv 上，您应该:

• 删除clear: both
• 添加float: left

在您的#searchDiv 上，您应该:

• 移除 margin-left: 64%
• 删除clear: both
• 添加float: right
• 添加 margin-right: 16% (以匹配 #infoDiv 上的 margin-left: 16%)

将以前的检查员与新检查员进行比较: