Question

我正在尝试添加一个自定义HTML元素，其行为类似于dropdown，但是由divs构建。我正在处理一个现有的页面，它已经有大量的静态HTML加上大量的JavaScript，有时候还会动态地向页面添加额外的HTML，所以我很有可能重新排序{ {1}}结构。

我遇到的问题是我的自定义下拉列表应该显示在已经有足够内容溢出的现有DOM内。所以会发生什么 - 当呈现页面时，应该显示我的下拉列表的div已经有一个滚动条，这是访问内容所需的，因此在展开时，我的下拉列表只有溢出才能看到此特定div的视口。

过去几天我已经阅读了很多这方面的内容。我知道一个选项是将div放在我的下拉列表HTML之外，但我真的不知道如何对已有的代码进行此操作。此外，我正在考虑使用滚动条，但也得出结论，这在我的情况下是不可行的，所以目前我所确定的是在div内部渲染可点击的 div让我遇到问题，但将内容放在溢出视口之外的另一个div中。

就代码而言，它看起来非常像那样：

div

$('.show-dropdown').click(function() {
  var originalElement = $(this);
	var ddId = originalElement.data("id");
  var element = $("." + ddId);
  
  if (element.hasClass('hide-me')) {
  
  	element.removeClass('hide-me');
    var relativeX = originalElement.offset().left - element.offset().left;
    var relativeY = originalElement.offset().top - element.offset().top;
    
    var posLeft = element.offset().left + relativeX;
    var posBottom = element.offset().top + relativeY - originalElement.outerHeight();

    element.css('bottom', posBottom);
    element.css('left', posLeft);
    
  } else {
  	element.addClass('hide-me');
  }
  
})

#top-div {
  width: 500px;
  max-width: 500px;
border: 1px solid black;
  max-height: 100px;
  overflow-y: auto;
white-space: nowrap;
}

#bottom-div {
  position: relative;
  width: 500px;
  max-width: 500px;
border: 1px solid black;
  max-height: 100px;
    overflow-y: auto;

}

.show-dropdown {
  width: 120px;
  height: 40px;
  background-color: green;
}

#dropdown-container {
  position: relative;
}

.render-this {
  position: absolute;
  z-index: 5;
  width: 20px;
  height: 150px;
  background-color: red;
}
.hide-me {
  display: none;
}

你也可以找到工作的jsFiddle HERE

除了我稍后会解决的完美初始定位之外，问题现在仍然是如何在<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="top-div"> <p> lorem ipsum lorem ipsum lorem ipsum lorem ipsumlorem ipsumlorem ipsum lorem ipsum lorem ipsum </p> </div> <div id="bottom-div"> <table> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> <th>Column 4</th> <th>Column 5</th> <th>Column 6</th> </tr> <tr> <td><div class="show-dropdown" data-id='dd-0'></div></td> <td><div class="show-dropdown" data-id='dd-1'></div></td> <td><div class="show-dropdown" data-id='dd-2'></div></td> <td><div class="show-dropdown" data-id='dd-3'></div></td> <td><div class="show-dropdown" data-id='dd-4'></div></td> <td><div class="show-dropdown" data-id='dd-5'></div></td> </tr> </table> </div> <div id="dropdown-container"> <div class="render-this dd-0 hide-me"></div> <div class="render-this dd-1 hide-me"></div> <div class="render-this dd-2 hide-me"></div> <div class="render-this dd-3 hide-me"></div> <div class="render-this dd-4 hide-me"></div> <div class="render-this dd-5 hide-me"></div> </div> div之间保留这种关系，这将是我的自定义下拉列表的内容和{{1} } div将是可点击的 div，我想保留这是一个实际的下拉列表的感觉。

我看到jQuery有这个POSITION函数应该提供这样的东西，但是例如它没有对调整浏览器的大小做出反应，所以现在我想看看是否有一些插件或使用JS / jQuery / Whaterver所需的方法，一旦在click事件发生后建立这种关系以保持外观并感觉这两个组件是一回事并对可能发生的不同事件作出反应，以便两个元素的位置相关相互保留了吗？

保持元素始终相对于另一个元素

0 个答案: