Question

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

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

我相信这里的问题可能与菜单滑下时显示属性从无到阻塞有关。但是，我尝试将两个下拉菜单设置为内联块无效。

我无法在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% （以匹配margin-left: 16%上的#infoDiv）

将先前的检查员与新的检查员进行比较：

当左侧div向下滑动时，右侧div被推到它下面。如何让它们保持在正确的位置？

2 个答案:

发生了什么事？