react-bootstrap 中的 NavDropdown 不会崩溃

Question

我正在使用

react-bootstrap 2.9.2

（引导程序 5.3.2）尝试创建一个简单的导航栏，导航菜单中的第一项是下拉列表。

NavDropdown

展开，下拉菜单中的路线可以工作，但下拉菜单永远不会折叠。我的理解是，它应该在几种情况下崩溃默认情况下，基于react-bootstrap示例的行为。展开时，我希望它折叠起来：

• 再次单击下拉列表的父级时（下面的示例中的“主页”）
• 单击下拉列表中的子项时（导航到不同的路线）
• 单击导航栏外部时

这些操作都不会折叠我的项目的下拉列表。目前折叠下拉列表的唯一方法是刷新页面。 如何让下拉菜单在这 3 种典型场景下折叠？

下面是一些我认为可能相关的代码，但很乐意在需要时提供更多代码。

index.js

：

import ReactDOM from 'react-dom/client';
import App from './App';
import { BrowserRouter } from 'react-router-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

App.js

：

import './App.css'
import React from 'react';
import MainPage from './components/MainPage'
import { Header } from './components/Header';
import { NavHeader } from './components/NavHeader';
import { Routes, Route } from 'react-router-dom';
import TransactionsPage from './components/TransactionsPage';

function App() {
  // This is what gets rendered on the page.
  return (
    <>
      { /* Display the decorative header, and navigation bar. */}
      <Header />
      <NavHeader />
      { /* Based on the selected route path, load a specific page. Index page is the default. */}
      <Routes>
        <Route exact path='/' element={<MainPage/>} />
        <Route path='/home/:category' element={<MainPage/>} />
        <Route path='/transactions' element={<TransactionsPage />} />
      </Routes>
    </>
  )
}

export default App;

NavHeader.js

：

import { Link, NavLink } from 'react-router-dom';
import { useState } from 'react';
import './NavHeader.css'

// Returns the navigation bar header.
export const NavHeader = () => {
    const [expanded, setExpanded] = useState(false);

    return (
        <Navbar collapseOnSelect>
            <Container>
                <Navbar.Toggle aria-controls="responsive-navbar-nav" />
                <Navbar.Collapse id="responsive-navbar-nav">
                    <Nav className="nav-header">
                        {/* Use Link from react-router-dom to define the routing links. */}
                        <NavDropdown
                                title="Home" 
                                id="collapsible-nav-dropdown" 
                                className="vertical-dropdown"
                                onToggle={() => setExpanded(!expanded)}
                                show={expanded}
                                >
                            <NavDropdown.Item as={NavLink} to="/home/stock">Stocks</NavDropdown.Item>
                            <NavDropdown.Item as={NavLink} to="/home/etf">ETFs</NavDropdown.Item>
                            <NavDropdown.Item as={NavLink} to="/home/full">Full</NavDropdown.Item>
                        </NavDropdown>
                        <Link to="/transactions" className="nav-item">Transactions & Performance</Link>
                    </Nav>
                </Navbar.Collapse>
            </Container>
        </Navbar>
    );
}

NavHeader.css

：

.nav-header {
    height: 4rem;
    display: flex;
    align-items: center;
    background-color: black;
}

.nav-item {
    color: grey;
    margin-left: 20px;
    margin-right: 20px;
    font-size: 20px;
}

.vertical-dropdown .dropdown-menu {
    display: flex;
    flex-direction: column;
}

.vertical-dropdown .dropdown-item {
    width: 100%;
    text-align: left;
}

这是下拉菜单展开后导航栏的样子：

下面列出了一些我已经尝试过但不起作用的方法：

• 将

  expanded

  状态变量设置为

  NavDropdown

  变量

  show

  、

  open

  和

  expanded

  。都没有效果。
• 尝试了

  Dropdown

  示例的各种迭代，包括

  DropdownButton

  与

  onToggle

  、

  onBlur

  、

  autoClose

  等，例如解决方案here。这些选项都不会允许下拉菜单按预期折叠。

编辑：

根据回复，我现在将

NavHeader.js

文件的一部分修改为：

.vertical-dropdown.show .dropdown-menu {
    display: flex;
    flex-direction: column;
}

现在，单击下拉列表中的子项或单击导航栏外部时，响应速度会更好。但是，这些点击操作不会“隐藏”下拉菜单；它从垂直列表“折叠”为水平列表，但仍然可见！ 如何让下拉菜单真正折叠并真正隐藏选项，而无需刷新整页？

Answer 1

.vertical-dropdown .dropdown-menu {
  display: flex;
  flex-direction: column;
}

它定义了 

.dropdown-menu

将始终是

display: flex

。然而，下拉菜单在内部使用

display: none

来隐藏它。您可以通过指定

.vertical-dropdown

应打开以使用

.show

类应用 css 来解决此问题：

.vertical-dropdown.show .dropdown-menu {
  display: flex;
  flex-direction: column;
}

查看代码沙盒：

另一方面，

.vertical-dropdown .dropdown-menu

已经是

column

方向的弹性元素，所以你实际上可以删除所有这些额外的CSS😉