javascript - 当左div向下滑动时，右div被推到其下方。如何使他们留在正确的地方？

我有一个从屏幕顶部向下滑动的菜单。此菜单具有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>

最佳答案

Chrome检查器提供的快速gif：




  一些技巧...
  
  
  蓝色是元素
  绿色是填充物
  橙色是保证金
  




这是怎么回事？

每个元素占用的是整个“行”，因为它们是块元素。有几项更改此行为的方法，即使用CSS Floats。



在您的#infoDiv上，您应该：


删除clear: both
添加float: left


在您的#searchDiv上，您应该：


删除margin-left: 64%
删除clear: both
添加float: right
添加margin-right: 16%（以匹配margin-left: 16%上的#infoDiv）


将以前的检查器与新的检查器进行比较：