javascript - 如果第 nth-child 为 1 或 2，则右对齐菜单

Question

我正在开发一个大型菜单，它显示左侧或右侧的下拉菜单，到目前为止我无法正确计算 offset.left 并且它表现出不同的不同分辨率。

所以我想在右侧显示第一个和第二个下拉菜单并在左侧显示，但我不确定如何让第 n 个子元素在 if 语句上工作。

简单的 fiddle 示例 http://jsfiddle.net/42MfQ/1/

我的大型菜单示例显示为这个 大型菜单的实际 fiddle 样本 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');  
   }

否则 { alert('在父菜单的左侧显示dd菜单');

Answer 1

我只是决定使用以下 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");
    }