2013-10-20 29 views
0

我正在一個巨大的菜單上顯示左側或右側的下拉到目前爲止我無法正確計算offset.left,它的行爲不同的分辨率。對齊菜單的權利,如果李小孩是1或2

所以我想到右側的顯示第一和第二個下拉菜單,左邊休息,但我不知道如何使if-statement中的第n個子元素工作。

簡單小提琴例如http://jsfiddle.net/42MfQ/1/

我的巨型菜單樣品,接近節目顯示爲大型菜單的這個enter image description here 實際小提琴樣品http://jsfiddle.net/5eecT/13/

我會很感激的幫助,使該腳本顯示菜單的正確。

眼下這個代碼不正確

if (($(this).offset().left) + 200 > $('.menu-wrapper').width()) { 
    $(this).find(".dropdown").addClass("dropdown-last"); 
} 

工作爲此,我雖然節目第一,在右側和左側的休息第二個下拉菜單,將避免自動檢測,通過上面的代碼來計算的。

我不知道該怎麼寫代碼

if($("li:nth-child(1)") == true || "li:nth-child(2)" == true)) 
    { 
    alert('show dd menu on right side of parent menu'); 
    } 

其他 { 警報(「顯示DD上一級菜單的左側菜單」);
}

+0

並非所有的菜單實際上都下降了一些東西。這是由設計嗎?另外我不確定Javascript應該達到什麼效果。這個問題的答案似乎只是「使用':nth-​​child(-n + 2)'」,但我不知道這是不是你想要的。 –

回答

0

我只是決定使用下面的jquery來使它與任何意想不到的結果一起工作。

這個簡單的添加一個dropdown-last類,它將文本左側的子菜單對齊。下面是一個例子&可以使用它,使其在某種程度上工作人想

$("#menu").on("mouseenter", ":nth-child(4)", function() { $(this).find(".dropdown").addClass("dropdown-last"); }); 
$("#menu").on("mouseenter", ":nth-child(5)", function() { $(this).find(".dropdown").addClass("dropdown-last"); }); 
$("#menu").on("mouseenter", ":nth-child(6)", function() { $(this).find(".dropdown").addClass("dropdown-last"); }); 

正如下面的jQuery是給我在不同的屏幕分辨率意想不到的效果。

if (($(this).offset().left) + 200 > $('.menu-wrapper').width()) { 
     $(this).find(".dropdown").addClass("dropdown-last"); 
    }