Question

背景摘要

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

因此，有两件事情可能发生（这是不可取的）：

a）页面加载，菜单开始滑动打开，但已经有一个上面提到的HTML对象已经位于其路径中，因此菜单展开了它，使得看起来很难看。

b）移动访问者使用横向视图进入网站，菜单在其路径中不显示任何内容，但随后用户更改为纵向视图，从而导致（有时）HTML标记与菜单重叠。

期望的结果：

我希望菜单能够对其环境作出反应，以便如果其他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

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

通过计算菜单在展开时的位置来检查潜在的重叠，并将该位置与可能重叠的元素进行比较。如果您知道菜单项的数量和每个菜单项的大小，您应该能够找出扩展的大小。使用顶部，底部，左侧和右侧属性以及高度和宽度来确定位置。比较可能重叠的元素的位置的计算位置。

以下是计算重叠的一些示例代码（不是我写的）：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];
}

如何检测是否有任何div重叠/“触摸”特定的div？

1 个答案: