从屏幕上滑出时用jQuery改变子菜单的位置

Question

我在CSS3中创建了一个3层下拉菜单，其中子菜单垂直下降。一切都很好，唯一的问题是当菜单(.main-menu > li ->，见下面的代码)太靠近屏幕的右边时，它的子菜单的某些部分随着它从屏幕上“滑出”而消失，变得不可见。

我想通过改变当前子菜单的浮动方向来改进jQuery菜单，如果它太靠近屏幕的一侧。我是jQuery的新手，你能帮我一下吗？

HTML的主要结构是：

<nav>
  <ul class="main-menu">
    <li><a href="#">Menu Point 1</a>
      <ul>
        <li><a href="#">Menu Point 1.1</a>
          <ul> 
            <li><a href="#">Menu Point 1.1.1</a></li>
            <li><a href="#">Menu Point 1.1.2</a></li>
            ....
          </ul>
        </li>
        <li><a href="#">Menu Point 1.2</a></li>
        ....
      </ul>
    </li>
    <li><a href="#">Menu Point 2</a>
      <ul>
        <li><a href="#">Menu Point 2.1</a>
          <ul>
            <li><a href="#">Menu Point 2.1.1</a></li>
            <li><a href="#">Menu Point 2.1.2</a></li>
            ....
          </ul>
        </li>
        <li><a href="#">Menu Point 2.2</a></li>
        ....
      </ul>
    </li>
    .....
  </ul>
</nav>

据我所知，jQuery应该这样做：

1. 测量一级子菜单+二级子菜单(x)的宽度。
2. 测量.main-menu > li的左侧位置与屏幕右侧位置(y)之间的距离。
3. if (y-x)<0 { float the submenus to the left (by default they float to the right); }

你有什么建议我该怎么开始？

Answer 1

因此，我自己找到了解决方案，如果有人感兴趣，下面是代码：

$(".main-menu > li > ul > li").addClass("submenu-1");
$(".main-menu > li > ul > li > ul > li").addClass("submenu-2");

$(".main-menu > li").on("mouseover", function() {

    if($(this).find(".submenu-1").length > 0 ) {
      var clientWidth = document.body.clientWidth;
      var menuDist1 = $(this).find(".submenu-1").offset().left;
      var menuWidth = $(this).width();
      var menuWidth1 = $(this).find(".submenu-1").width();
      var menuWidth2 = $(this).find(".submenu-2").width();

      var menuPosition = menuDist1 + menuWidth1 + menuWidth2;

      if (menuPosition > clientWidth) {
        var newPosition1 = menuWidth - menuWidth1;
        var newPosition2 = -menuWidth1;

        $(this).find(".submenu-1").parent("ul").css("left", newPosition1);
        $(this).find(".submenu-2").parent("ul").css("left", newPosition2);
      }
   }    
});