<p><br /></p> <pre class="brush:php;toolbar:false;"><ドロワー アンカー=「左」 className="引き出し領域を左に移動" バリアント = "永続的" open={true} PaperProps={{ スタイル： { 幅: "継承", 背景: "#172B4D", 背景画像: `linear-gradient(右へ、#172B4D 60% 、白 40%)`, 境界線: "なし"、 オーバーフローY: "非表示", }、 }} > <ボックス> <ボックス> <ボックス> <Box className="listing" sx={{ width: "100%" }}> <List className="mp-0 wh-100 overflow-overlay"> {メニュー&& メニューの長さ > 0&&; メニュー.マップ((項目, インデックス) => ( <ボックスキー={インデックス}> <リストアイテム ref={ポップオーバーアンカー} className={`mp-0 NavigationList flex-start-center`} ** onMouseEnter={(e) => { setNestedArr([...item?.children]); ポップオーバーエンター(e); setAnchorEl(e?.currentTarget); }} onMouseLeave={(e) => { PopoverLeave(e); }}** onClick={(e) => { console.log(item,'parent_clicked') }} > <リストアイテムテキスト> <ボックス> {micons[アイテム?.名前] ? ( マイコン[アイテム?.名前] ):( <Icon>{item?.icon_class}</Icon> )} </ボックス> ＜タイポグラフィー＞ {項目名} </タイポグラフィ> </タイポグラフィ> } /> </ListItem> </ボックス> ))} </リスト> </ボックス> </ボックス> </ボックス> {開く&&入れ子になったArr.length ? ( <ネストされたメニュー 開く={開く} setOpen={(val) => setOpen(val)} アンカーEl={アンカーEl} nestedArr={nestedArr}lightBackground={lightBackground} セカンダリカラー={セカンダリカラー} ポップオーバーアンカー={ポップオーバーアンカー} PopoverEnter={popoverEnter} PopoverLeave={popoverLeave} /> ） ： ヌル} </ボックス> </Drawer></pre> <p><strong> ページの左側にいくつかのメニューがあります (MUI ライブラリとmaterial-ui-nested-menu-item ライブラリを使用)。マウスを Listitems の上に置くと、メニューが表示されます。ネストされたメニューまたはサブメニューを使用し、マウスを離れるとメニューを閉じますが、私が直面している問題は、メニューの上にマウスを置いたときに同時に onMouseLeave イベントが発生するため、メニューが開かないことです。何が問題なのか分かりません。 </strong></p>