我正在next.js项目中开发一个下拉菜单，
我做了一个方法来隐藏和显示子菜单的数据，但我不能显示具体的子下拉菜单。下面是代码

import  {useEffect, useState } from "react";

function Header({data}){
    const [showMe, setShowMe] = useState(false);
    function toggle(param){
      console.log(param)
      setShowMe(!showMe);
    };
    return(
        <div className="mobile-header">
              <div className="mobile-menu">
                  <div className="menu-icon">
                  <div className="wrapper">
                      <input type="checkbox" id="navigation" />
                      <label for="navigation">
                           +
                      </label>
                      
                            <nav>
                                <ul>
                                    <li className="menu-heading">
                                        <span>Menu</span>
                                        <span>
                                            <label for="navigation">X</label>
                                        </span>
                                        
                                    </li>
                                    {data.menus.map((post, index) => {
                        return (
                            <li className="menu-list" id={index}>
                                {post.title} <span onClick = {(event)=>toggle({index})} index={index} >+</span>
                                    <ul style={{display: showMe?"block":"none"}} index={index} value={index} className="category-one">
                                        {post.menu_columns.map((subItems, sIndex) => {
                                            return <li index={sIndex}>
                                                {subItems.title}
                                                <span>+</span>
                                                <ul className="category-two">
                                                    {subItems.menu_items.map((x) => {
                                                        return <li>
                                                            {x.title}
                                                        </li>
                                                    })}
                                                </ul>
                                            </li>;
                                         })}
                                    </ul>
                                
                            </li>)})}
                                    
                                   
                                   
                                </ul>
                            </nav>
                            </div>
                        </div>
                    </div>
                   
                </div>
              
            </div>
   )
} 
export default Header;

toggle是一个函数，它负责显示和隐藏数据，在这个函数中传递了一个参数，提供了特定的索引值，我们如何通过使用这个索引值来定位特定的div。