用js封装下拉菜单插件 要求：当一级标题超过两个，请展示“查看剩余标题” 点击“查看剩余标题”，显示隐藏的其他一级标题 点击一级标题或右侧向下箭头，展开二级标题。 当二级标题超过两个时，展示“查看剩余二级标题”。 点击“查看剩余二级标题”，展开其它隐藏的二级标题 点击二级标题右侧的弹窗按钮，在页面中心弹出一个区块和一个蒙层，区块中展示当前按钮所在一级标题和二级标题的index。点击蒙层，隐藏蒙层和区块。

您可以按照以下方式封装一个下拉菜单插件：

function DropdownMenu(elementId, data) {
  const container = document.getElementById(elementId);
  const firstLevelList = document.createElement('ul');
  const secondLevelMap = new Map();

  // 创建一级标题列表
  function createFirstLevelList() {
    data.slice(0, 2).forEach(item => {
      const li = document.createElement('li');
      li.innerText = item.firstLevelTitle;
      li.classList.add('first-level');
      li.addEventListener('click', () => toggleSecondLevelList(item.firstLevelTitle));
      firstLevelList.appendChild(li);

      // 创建二级标题列表
      const secondLevelList = document.createElement('ul');
      item.secondLevelTitles.forEach(title => {
        const secondLevelLi = document.createElement('li');
        secondLevelLi.innerText = title;
        secondLevelLi.classList.add('second-level');
        secondLevelLi.addEventListener('click', () => showPopup(item.firstLevelTitle, title));
        secondLevelList.appendChild(secondLevelLi);
      });

      // 将二级标题列表存储在Map中
      secondLevelMap.set(item.firstLevelTitle, secondLevelList);
    });

    // 如果一级标题超过两个，则显示“查看剩余标题”按钮
    if (data.length > 2) {
      const showMoreButton = document.createElement('li');
      showMoreButton.innerText = '查看剩余标题';
      showMoreButton.classList.add('show-more');
      showMoreButton.addEventListener('click', showMoreFirstLevelTitles);
      firstLevelList.appendChild(showMoreButton);
    }

    container.appendChild(firstLevelList);
  }

  // 展示隐藏的其他一级标题
  function showMoreFirstLevelTitles() {
    data.slice(2).forEach(item => {
      const li = document.createElement('li');
      li.innerText = item.firstLevelTitle;
      li.classList.add('first-level');
      li.addEventListener('click', () => toggleSecondLevelList(item.firstLevelTitle));
      firstLevelList.appendChild(li);

      const secondLevelList = document.createElement('ul');
      item.secondLevelTitles.forEach(title => {
        const secondLevelLi = document.createElement('li');
        secondLevelLi.innerText = title;
        secondLevelLi.classList.add('second-level');
        secondLevelLi.addEventListener('click', () => showPopup(item.firstLevelTitle, title));
        secondLevelList.appendChild(secondLevelLi);
      });
      
      secondLevelMap.set(item.firstLevelTitle, secondLevelList);
    });

    // 移除“查看剩余标题”按钮
    firstLevelList.removeChild(firstLevelList.lastChild);
  }

  // 切换展开/收起二级标题列表
  function toggleSecondLevelList(firstLevelTitle) {
    const secondLevelList = secondLevelMap.get(firstLevelTitle);
    if (secondLevelList.style.display === 'none') {
      secondLevelList.style.display = 'block';
    } else {
      secondLevelList.style.display = 'none';
    }
  }

  // 显示弹窗
  function showPopup(firstLevelTitle, secondLevelTitle) {
    const popupContainer = document.createElement('div');
    popupContainer.classList.add('popup-container');

    const popup = document.createElement('div');
    popup.classList.add('popup');
    popup.innerHTML = `
      <p>一级标题：${firstLevelTitle}</p>
      <p>二级标题：${secondLevelTitle}</p>
      <button class="close-button">关闭</button>
    `;

    const overlay = document.createElement('div');
    overlay.classList.add('overlay');

    // 点击蒙层，隐藏蒙层和弹窗
    overlay.addEventListener('click', () => {
      container.removeChild(popupContainer);
      container.removeChild(overlay);
    });

    // 点击关闭按钮，隐藏蒙层和弹窗
    const closeButton = popup.querySelector('.close-button');
    closeButton.addEventListener('click', () => {
      container.removeChild(popupContainer);
      container.removeChild(overlay);
    });

    popupContainer.appendChild(popup);
    container.appendChild(popupContainer);
    container.appendChild(overlay);
  }

  // 初始化插件
  function init() {
    createFirstLevelList();
  }

  init();
}

// 使用示例
const data = [
  {
    firstLevelTitle: '标题1',
    secondLevelTitles: ['二级标题1', '二级标题2']
  },
  {
    firstLevelTitle: '标题2',
    secondLevelTitles: ['二级标题3', '二级标题4', '二级标题5']
  },
  {
    firstLevelTitle: '标题3',
    secondLevelTitles: ['二级标题6', '二级标题7', '二级标题8', '二级标题9']
  }
];

const dropdownMenu = new DropdownMenu('dropdown-menu', data);

请根据您的实际需求，完善相应的样式和功能。