预设隐藏状态下JS实现的Dropdown menu masonry功能失效求助

问题根源是display: none状态的元素不会被浏览器渲染盒模型参数，脚本无法读取容器、子元素的宽高数值，导致masonry布局计算错误。可选用以下任意一种方案修复：

方案1：首次展开时初始化masonry（最推荐） #

延迟masonry初始化时机，等到下拉菜单第一次被展开、容器处于可见状态时再执行初始化，后续展开无需重复计算。
示例代码：

// 初始化状态标记
let masonryHasInited = false
const menuToggle = document.querySelector('#你的菜单触发按钮ID')
const mainMenu = document.querySelector('#main-menu')

menuToggle.addEventListener('click', () => {
  mainMenu.classList.toggle('hidden')
  // 首次展开时执行初始化
  if (!masonryHasInited && !mainMenu.classList.contains('hidden')) {
    // 此处替换为你原有的masonry初始化逻辑
    initYourMasonryFunc()
    masonryHasInited = true
  }
})

方案2：修改隐藏样式避免display:none #

如果需要提前初始化masonry，可替换原有隐藏逻辑，不使用display:none，改用不影响元素尺寸计算的隐藏方式：

/* 替换原有的hidden类样式 */
.hidden {
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
  visibility: hidden;
  pointer-events: none;
}
/* 显示时重置样式 */
#main-menu:not(.hidden) {
  position: static;
  left: auto;
  top: auto;
  visibility: visible;
  pointer-events: auto;
}

方案3：展开时强制重新计算布局 #

如果你使用的是成熟的masonry库（如Masonry.js），可保留原有初始化逻辑，每次菜单展开时调用布局重算方法：

// 原有初始化逻辑不变
const masonryInstance = new Masonry('#main-menu', {
  itemSelector: '.你的子元素选择器',
  // 其余原有配置
})

const menuToggle = document.querySelector('#你的菜单触发按钮ID')
const mainMenu = document.querySelector('#main-menu')

menuToggle.addEventListener('click', () => {
  mainMenu.classList.toggle('hidden')
  if (!mainMenu.classList.contains('hidden')) {
    // 触发重新布局计算
    masonryInstance.layout()
  }
})

补充注意事项 #

如果菜单内包含未设置固定宽高的图片，建议等图片加载完成后再执行初始化或重算布局，避免图片加载后高度变化导致错位。

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