Wix多show more按钮点击展开功能复制后失效如何解决

问题原因 #

• 函数名冲突：两段代码的activeMenu函数重名，JavaScript中后声明的同名函数会覆盖前者，导致第一个按钮的绑定逻辑直接失效
• 冗余重复声明：重复导入wix-animations模块、重复注册$w.onReady回调，属于无效冗余代码，还可能引发执行异常
• 元素ID不匹配：你提到修改后的菜单ID是dropdownmenu3，但第二段代码中绑定的是#dropdownMenu2，Wix的元素ID大小写敏感，拼写或大小写不匹配就无法找到对应元素，自然点击无响应
• 语法与逻辑瑕疵：y: - dropdownBoxHeight的换行写法不规范，且dropdownBoxHeight设为0会导致动画位移为0，看不到正常的展开动效

修复方案 #

不要重复复制整段逻辑，把通用功能抽成可传参的复用函数，新增同类按钮时只需新增一行初始化调用即可，修正后代码如下：

// 仅需导入一次模块
import wixAnimations from 'wix-animations';

$w.onReady(function() {
  // 初始化第一个按钮+菜单，第三个参数为下拉展开的位移高度，可根据实际菜单高度调整
  initDropdown('#menuButton', '#dropdownMenu', 200);
  // 初始化第二个按钮+菜单，填入你修改的对应ID
  initDropdown('#menuButton2', '#dropdownmenu3', 200);
  // 后续新增同类功能，只需在此处加一行initDropdown调用，传入对应元素ID即可
});

// 通用下拉功能初始化函数
function initDropdown(buttonSelector, menuSelector, dropdownHeight) {
  const menuButton = $w(buttonSelector);
  const dropdownMenu = $w(menuSelector);
  // 初始化菜单为收起状态
  dropdownMenu.collapse();
  
  const dropdownAnimation = wixAnimations.timeline()
    .add(dropdownMenu, {
      y: 0,
      duration: 100
    });

  // 初始状态将菜单位移到收起位置
  wixAnimations.timeline()
    .add(dropdownMenu, {
      y: -dropdownHeight
    }).play();

  menuButton.onClick(() => {
    dropdownMenu.collapsed ? openMenu() : closeMenu();
  });

  dropdownAnimation.onReverseComplete(() => {
    dropdownMenu.collapse();
  });

  function openMenu() {
    dropdownMenu.expand().then(() => {
      dropdownAnimation.play();
    })
  }

  function closeMenu() {
    dropdownAnimation.reverse();
  }
}

注意事项 #

• 确认页面内的元素ID和代码中传入的ID完全一致，拼写、大小写都要匹配
• 代码中的dropdownHeight参数请替换为你实际下拉菜单的高度，才能得到正常的展开收起动效

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