定位父元素，使子元素处于完全相同的位置

Positioning parent element so child is in exact same position

本文关键字：元素 于完全 位置 定位      更新时间：2023-09-26

我正试图在JS中实现一个下拉列表。我有一个div容器，里面有很多项目。我想把它变成一个下拉列表，这样当点击下拉列表打开时，当前选择的项目将完全保持在同一个位置，其他项目将显示在它的上方和下方。

我从这个结构开始：

   <div>this is some random paragraph of text or any other content where dropdown will be positioned
    <div class="dropdown"><ul>          
          <li>aaaaa</li>
          <li class="selected">b fdfb</li>
          <li>cccc</li>
          <li>dd</li>
          <li>cccc</li>
          <li>eee</li>
          <li>ffff</li>
          <li>gggg</li>
          <li>hh</li>
          <li>iiiii ii</li>
        </ul>
     </div>
         and this is more
   </div>

只有一个项目显示在某个地方，例如文本段落内。我遇到的问题是，当下拉列表打开时，我发现很难匹配div.dropdown的位置（与所有子项一起显示），因此当前选择的项目将完全位于同一位置。

我该如何最好地处理这个问题？

编辑：在这里创建Fiddle，因为这可能会让你更好地了解我在之后的想法

这里似乎有一些问题：

  1. 当下拉列表打开时，它将比其父容器中的文本占据更多的垂直空间。这意味着它在打开时会发生移动，因为父对象的线高度对于展开的下拉列表来说不够大。将父<div>的line-height设置为更大的值（如1.5em左右）以解决此问题
  2. 水平宽度不稳定，因为文本值的长度不同。当选择不同长度的项目时，您需要将所有项目设置为相同的宽度，以防止右侧的文本移位
  3. 选择下拉菜单时，文本下移2个像素。这可能是一些正在应用的浏览器样式的副产品。更改线路：

t = liTop - Math.ceil(this.$ul.offset().top) + 15;

至

t = liTop - Math.ceil(this.$ul.offset().top) + 17;

修复了此问题。

以下是更新后的Fiddle：http://jsfiddle.net/vvz1dx31/5/-在Chrome 40、IE 11和FF 36中进行测试。

相关文章：