javascript - 如何检测是否有任何 div 与/'touching' 特定 div 重叠？

Question

背景摘要

我有一个切换菜单，可以在文档加载时移动和向下滑动。但是网页是响应式的。因此，在较大的屏幕尺寸上，有足够的空间供菜单展开，但某些页面包含 IMG、DIV 或 SPAN 标签，它们通过媒体查询重新排列自身并占用菜单所需的空间。

因此可能会发生以下两种情况之一(这是不希望的):

a) 页面加载，菜单开始滑动打开，但前面提到的 HTML 对象之一已经位于其路径中，因此菜单在其上展开，使事情看起来很难看。

b) 移动访问者使用横向 View 进入网站，菜单展开，其路径中没有任何内容，但随后用户更改为纵向 View ，导致(有时)HTML 标记与菜单重叠。

期望的结果:

我希望菜单对其环境使用react，这样如果其他 DIV 侵占其空间，菜单将自动触发自身的单击事件，这将导致菜单回滚并坐在其顶部的位置上屏幕。

这也意味着，当它最初展开时，菜单应该“意识到”它下面的内容，并且在有东西存在的情况下，首先不展开；或者展开直到它碰到其他 html 对象，然后立即反转方向并卷回其位置。

一眼胜过千句，所以请看看下面的 jsfiddle。

当前代码的 JSFiddle 设置

http://jsfiddle.net/Nick_Wordpress/jLeGq/1/

当前工作代码

jQuery(window).load(function() {
  if (jQuery(".toggle").is(":hidden")) {
    jQuery(".toggler").trigger("click");
  }
});
jQuery(".toggler").on("click touchstart", function() {
  toggler = jQuery(this);
  room_navigation_top = 150;
  pos = 20;
  room_navigation_left = 80;
  toggler.next(".toggle").is(":visible") ? toggler.next(".toggle").slideUp(function() {
    toggler.addClass("minimized").removeClass("maximized").find(".indicator").text("+");
    toggler.parent().animate({top:pos + "px", left:pos + "px"});
  }) : ("object" == typeof event.originalEvent && (lock_room_navigation = !0), toggler.parent().animate({top:room_navigation_top + "px", left:room_navigation_left + "px"}, function() {
    toggler.addClass("maximized").removeClass("minimized").find(".indicator").text("-");
    toggler.next(".toggle").slideDown();
  }));
});

预先感谢您为解决此问题提供的任何意见。

Answer 1

在计算出菜单是否会与任何其他元素重叠后，决定是否展开菜单。 (先展开然后检查是否需要再次折叠它是一个丑陋的解决方案)

通过计算菜单在展开时的位置来检查潜在的重叠，并将该位置与其可能重叠的元素进行比较。如果您知道菜单项的数量和每个菜单项的大小，您应该能够计算出扩展后的大小。使用 top、bottom、left、right 属性以及高度和宽度来确定位置。将计算出的位置与有重叠风险的元素的位置进行比较。

这是一些计算重叠的示例代码(不是我写的):http://jsfiddle.net/98sAG/

function getPositions( elem ) {
    var pos, width, height;
    pos = $( elem ).position();
    width = $( elem ).width();
    height = $( elem ).height();
    return [ [ pos.left, pos.left + width ], [ pos.top, pos.top + height ] ];
}
function comparePositions( p1, p2 ) {
    var r1, r2;
    r1 = p1[0] < p2[0] ? p1 : p2;
    r2 = p1[0] < p2[0] ? p2 : p1;
    return r1[1] > r2[0] || r1[0] === r2[0];
}