如何让jQuery UI下拉菜单在视口边缘自动调整展开方向

你当前通过CSS添加了!important强制固定子菜单的left和top属性，而jQuery UI Menu的边界检测翻转逻辑本身就是通过动态修改这两个属性实现的，强制覆盖后组件动态计算的位置规则无法生效，自然不会触发方向翻转。

1. 首先删除CSS中带!important的子菜单定位规则，保留基础的菜单样式即可：

.information_menu_item {
  width: 300px;
  box-sizing: border-box;
}

2. 调整menu组件初始化配置，仅指定一级菜单的定位规则，子菜单保留组件默认的向右展开逻辑与碰撞翻转能力：

$(document).ready(function() {
  $('.information_menu_root_ul').menu({
    position: {
      my: 'left top',
      at: 'left bottom+2',
      // 显式开启边界碰撞翻转，第一个值对应水平方向，第二个对应垂直方向
      collision: 'flip flip'
    }
  });
});

3. HTML部分无需修改，和你现有代码保持一致即可。

配置完成后即可实现预期效果：一级菜单向下展开，所有子菜单默认向右展开，当菜单触碰到视口右边界时会自动向左翻转适配视口范围。

内容的提问来源于stack exchange，提问作者DuhVir