当左 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

编织： http://kodeweave.sourceforge.net/editor/#e0f8383b4f7e089f87b6784edb952540

这只是我试图复制我在图像中看到的内容而已。这就是为什么我不使用position absolute。

对于侧面按钮（左/右下拉菜单），我只是使用margin 将它们对齐到我需要的位置。记住DRY！

编辑：
Here's my fork of your Plunk：https://plnkr.co/edit/QlwPPdPWfYJEQJq2PvZx?p=preview

当你的左按钮的可见性改变时你的右按钮向下移动的原因是默认情况下一个div元素是display block

意味着它将始终以新行（如段落）的形式出现。

所以首先你需要将它封装在一个新的 div 中（这将处理它的主要定位）

然后把左边的div告诉float left，把右边告诉float right

$(".togglemain").click(function() {
  $(this).find(".fa").toggleClass("fa-arrow-up fa-arrow-down")
})

body {
  text-align: center;
}

/* Main Dropdown */
.maindrop, .leftdrop, .rightdrop {
  padding: 1em;
  background: #000;
  color: #fff;
  border-radius: 0 0 20px 20px;
  transition: all .2s linear;
}
.circletxt {
  margin: -0.16em;
  padding: 0.2193408em 0.48576em;
  background: #fff;
  color: #000;
  border-radius: 25em;
}
/* Toggle Dropdown */
.togglemain {
  position: relative;
  top: 0.68em;
  padding: 0.68em 1em;
  background: #d6a12d;
  color: #fff;
  border-radius: 0 0 20px 20px;
}

/* Left & Right Dropdowns */
.leftdrop, .rightdrop {
  width: 165px;
  background: #292929;
}
.leftdrop {
  margin: -20px 1.12em;
  width: 165px;
}
.rightdrop {
  margin: -18px 1.12em;
  float: right;
  width: 165px;
}

/* Click Events */
.maindrop {
  height: 0;
  padding: 0;
  overflow: hidden;
}
.leftdrop, .rightdrop {
  height: 0;
  padding: 0 1em;
  overflow: hidden;
}
#maindrop:checked ~ .maindrop {
  height: auto;
  padding: 1em;
  overflow: visible;
}
#leftdrop:checked ~ .leftdrop {
  height: auto;
  padding: 1em;
  overflow: visible;
}
#rightdrop:checked ~ .rightdrop {
  height: auto;
  padding: 1em;
  overflow: visible;
}


/* varaible classes */
.pointer {
  cursor: pointer;
}
.fl {
  float: left;
}
.fn {
  float: none;
}
.fr {
  float: right;
}
.hide {
  display: none;
}

<link href="https://necolas.github.io/normalize.css/4.1.1/normalize.css" rel="stylesheet"/>
<link href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<input type="checkbox" id="maindrop" class="hide">

<div class="maindrop mainmove">
  Main Dropdown
  <label for="leftdrop" class="fl pointer circletxt fa fa-info"></label>
  <label for="rightdrop" class="fr pointer fa fa-search"></label>
</div>

<label class="togglemain mainmove pointer" for="maindrop">
  <span class="fa fa-arrow-down"></span>
</label>

<div class="wrap mainmove">
  <input type="checkbox" id="leftdrop" class="hide">
  <input type="checkbox" id="rightdrop" class="hide">

  <div class="fl pointer leftdrop">
    Left Dropdown
  </div>
  <div class="fr pointer rightdrop">
    Right Dropdown
  </div>
</div>

Answer 2

来自 Chrome 检查器的快速 gif：

一些提示...

• 蓝色是元素
• 绿色是填充
• 橙色是边距

---

发生了什么事？

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

---

在您的#infoDiv 上，您应该：

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

在您的#searchDiv 上，您应该：

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

比较以前的检查员和新的检查员：