沙盒/js

window.onload = function() {
  // 手动定义每组下拉菜单及其对应的下一级菜单
  var dropdownPairs = [
    { parent: '.wiki-menu-li-1', child: '.wiki-menu-li-2' },
    { parent: '.wiki-menu-li-2', child: '.wiki-menu-li-3' }
  ];

  // 创建一个映射，存储每个下拉菜单及其对应的下一级菜单
  var dropdownMap = new Map();

  // 遍历所有定义的下拉菜单对
  dropdownPairs.forEach(function(pair) {
    var parentDropdown = document.querySelector(pair.parent);
    var childDropdown = document.querySelector(pair.child);

    if (parentDropdown && childDropdown) {
      dropdownMap.set(parentDropdown, childDropdown);
    }
  });

  // 为每个父级下拉菜单元素添加鼠标悬停事件监听器
  dropdownMap.forEach(function(nextLevelDropdown, parentDropdown) {
    parentDropdown.addEventListener('mouseover', function() {
      console.log('鼠标悬停在下拉菜单上');

      // 检查下一级菜单是否超出屏幕底部
      if (nextLevelDropdown.getBoundingClientRect().bottom > window.innerHeight) {
        nextLevelDropdown.style.bottom = '0';
        nextLevelDropdown.style.top = 'auto';
      }

      // 检查下一级菜单是否超出屏幕右侧
      if (nextLevelDropdown.getBoundingClientRect().right > window.innerWidth) {
        nextLevelDropdown.style.left = 'auto';
        nextLevelDropdown.style.right = '0';
      }

      // 检查下一级菜单是否超出屏幕左侧
      if (nextLevelDropdown.getBoundingClientRect().left < 0) {
        nextLevelDropdown.style.right = 'auto';
        nextLevelDropdown.style.left = '0';
      }

      // 检查下一级菜单是否超出屏幕上侧
      if (nextLevelDropdown.getBoundingClientRect().top < 0) {
        nextLevelDropdown.style.top = 'auto';
        nextLevelDropdown.style.bottom = '0';
      }
    });
  });
};

var dropdowns = document.querySelectorAll('.dropdown, .dropdown-2, .dropdown-3');
var dropdownMap = new Map();
dropdowns.forEach(function(dropdown) {
  var nextLevelDropdown = dropdown.querySelector('.dropdown-content, .dropdown-content-2, .dropdown-content-3');
  if (nextLevelDropdown) {
    dropdownMap.set(dropdown, nextLevelDropdown);
  }
});
dropdowns.forEach(function(dropdown) {
  dropdown.addEventListener('mouseover', function() {
    var nextLevelDropdown = dropdownMap.get(this);
    if (nextLevelDropdown) {
      if (nextLevelDropdown.getBoundingClientRect().bottom > window.innerHeight) {
        nextLevelDropdown.style.bottom = '100%';
        nextLevelDropdown.style.top = 'auto';
      }
      if (nextLevelDropdown.getBoundingClientRect().right > window.innerWidth) {
        nextLevelDropdown.style.left = 'auto';
        nextLevelDropdown.style.right = '0';
      }
      if (nextLevelDropdown.getBoundingClientRect().left < 0) {
        nextLevelDropdown.style.right = 'auto';
        nextLevelDropdown.style.left = 'auto';
      }
      if (nextLevelDropdown.getBoundingClientRect().top < 0) {
        nextLevelDropdown.style.top = 'auto';
        nextLevelDropdown.style.bottom = 'auto';
      }
    }
  });
});