Bootstrap 4.0.0多级悬停菜单页面变窄时超出屏幕问题求助

我来帮你搞定这个悬停菜单的屏幕边界适配难题！针对你提到的情况——用div替代li/ul构建多级结构、荷兰语菜单项+英语提示、需要让悬停触发的下拉菜单在窄屏时保持可视，这里有两个可行方案：

方案一：手动实现边界检测逻辑（推荐，更灵活适配你的自定义结构） #

不需要依赖第三方插件，直接用jQuery结合hover事件来做位置判断，步骤如下：

1. 基础CSS设置 #

先确保父菜单和下拉菜单的定位关系正确：

/* 父菜单容器（触发下拉的元素） */
.menu-parent {
  position: relative;
  /* 你的其他自定义样式，比如 padding、字体等 */
}

/* 下拉菜单容器 */
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  display: none;
  /* 你的其他自定义样式，比如背景、边框、宽度等 */
}

2. jQuery悬停事件+边界检测 #

给父菜单绑定hover事件，在鼠标进入时显示下拉菜单并检测是否超出视口，超出则调整位置：

// 一级菜单悬停处理
$('.menu-parent').hover(
  // 鼠标进入时
  function() {
    const $dropdown = $(this).find('.dropdown-menu');
    $dropdown.show(); // 先显示才能获取元素尺寸
    
    // 获取关键位置参数
    const parentOffset = $(this).offset();
    const dropdownWidth = $dropdown.outerWidth();
    const viewportWidth = $(window).width();
    const dropdownRightEdge = parentOffset.left + dropdownWidth;
    
    // 判断是否超出右侧视口，是的话调整到左侧显示
    if (dropdownRightEdge > viewportWidth) {
      $dropdown.css({ left: 'auto', right: '0' });
    } else {
      // 恢复默认左侧定位
      $dropdown.css({ left: '0', right: 'auto' });
    }
  },
  // 鼠标离开时
  function() {
    const $dropdown = $(this).find('.dropdown-menu');
    $dropdown.hide();
    // 重置位置，避免下次显示时位置异常
    $dropdown.css({ left: '0', right: 'auto' });
  }
);

// 二级及多级菜单同理，只需给子级父项也加上.menu-parent类
// 额外处理窗口 resize 事件，确保窗口大小变化时已显示的菜单能重新适配
$(window).resize(function() {
  $('.dropdown-menu:visible').each(function() {
    const $dropdown = $(this);
    const $parent = $dropdown.closest('.menu-parent');
    const parentOffset = $parent.offset();
    const dropdownWidth = $dropdown.outerWidth();
    const viewportWidth = $(window).width();
    const dropdownRightEdge = parentOffset.left + dropdownWidth;
    
    if (dropdownRightEdge > viewportWidth) {
      $dropdown.css({ left: 'auto', right: '0' });
    } else {
      $dropdown.css({ left: '0', right: 'auto' });
    }
  });
});

3. 适配多级嵌套菜单 #

如果你的菜单有二级、三级嵌套，只要给每个触发子菜单的父div都加上.menu-parent类，给对应的子菜单加上.dropdown-menu类，上述代码就能自动处理所有层级的边界检测。

方案二：改造Sam Sehnert的jQuery插件 #

如果你更倾向于用现成插件，可以按照以下思路修改：

1. 找到插件中绑定点击事件的代码（比如$('.trigger').click(...)），把它替换为hover事件绑定：$('.trigger').hover(enterCallback, leaveCallback)
2. 调整插件内的显示/隐藏逻辑，对应hover的两个回调（鼠标进入显示菜单，离开隐藏）
3. 修改插件中的元素选择器，适配你用div构建的菜单结构（比如把原插件针对li、ul的选择器，改成你自定义的div类名）

这个方案需要你对插件源码有一定的理解，但能复用插件中已有的边界检测逻辑。

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