jquery - 当它滑出屏幕时用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);
      }
   }    
});