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

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

转载作者：行者123 更新时间：2023-11-28 05:51:50

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