如何檢測任何div是否重疊/「觸摸」特定的div？

Question

背景摘要

我有一個切換菜單，可以在文檔加載時移動和滑動。但是，網頁是響應式的。因此，在更大的屏幕尺寸下，菜單的展開空間可以展開，但某些頁面包含IMG，DIV或SPAN標籤，這些標籤可以通過媒體查詢重新排列，並佔用菜單所需的空間。

這樣的兩件事情可能發生（即不希望的）之一：

一）該頁面加載，菜單開始滑動打開，但已經有已經位於其路徑，上述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]; 
}