悬停时的 React-Bootstrap 下拉菜单

Question

我正在开发我的第一个 react-bootstrap 网站，我注意到导航栏中的下拉菜单不允许悬停下拉菜单。

我想知道是否有解决方法。我尝试在我的 CSS 中添加一些代码。 演示 - https://codesandbox.io/s/react-bootstrap-nav-active-link-5v5jq?fontsize=14&hidenavigation=1&theme=dark

/*MENU*/
.dropdown:hover {
  display: block;
}
/*END MENU*/

但是，这不起作用

这是代码。

import React from 'react';
import {Nav, Navbar, NavDropdown } from 'react-bootstrap';
import '../App.css';

function Header() {
    return (
            <Navbar bg="transparent" variant="dark" expand="lg">
            <Navbar.Brand href="#home" className="App-logo">AdStichr</Navbar.Brand>
            <Navbar.Toggle aria-controls="basic-navbar-nav" />
            <Navbar.Collapse id="basic-navbar-nav">
                <Nav className="ml-auto">
                <Nav.Link href="#home">Home</Nav.Link>
                <Nav.Link href="#link">Link</Nav.Link>
                <NavDropdown title="Dropdown" id="basic-nav-dropdown" alignRight>
                    <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
                    <NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
                    <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
                    <NavDropdown.Divider />
                    <NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>
                </NavDropdown>
                </Nav>

            </Navbar.Collapse>
            </Navbar>
    )
}
export default Header;

甚至试过这个

const Header = props => {
    const { location } = props;
    const [isOpen, updateIsOpen] = useState(false);
    return (
        <Navbar bg="transparent" variant="dark" expand="lg">
        <Navbar.Brand href="#home" className="App-logo">AdStichr</Navbar.Brand>
        <Navbar.Toggle aria-controls="basic-navbar-nav" />
        <Navbar.Collapse id="basic-navbar-nav">
            <Nav className="ml-auto" activeKey={location.pathname}>
            <Nav.Link href="/">Home</Nav.Link>
            <Nav.Link href="/advertisers">Advertisers</Nav.Link>
            <NavDropdown title="Publishers" id="basic-nav-dropdown" alignRight
             onMouseOver={() => updateIsOpen(true)}
             onFocus={() => updateIsOpen(true)}
             onMouseLeave={() => updateIsOpen(false)}
             onBlur={() => updateIsOpen(false)}
             toggle={() => updateIsOpen(!isOpen)}
             isOpen={isOpen}>
                <NavDropdown.Item href="/publishers/radio">Radio Stations</NavDropdown.Item>
                <NavDropdown.Divider />
                <NavDropdown.Item href="/publishers/podcasters">Audio Podcasters</NavDropdown.Item>
                <NavDropdown.Divider />
                <NavDropdown.Item href="/publishers/videopodcasters">Video Podcasters</NavDropdown.Item>
            </NavDropdown>
            <Nav.Link href="/case-studies">Case Studies</Nav.Link>
            <Nav.Link href="/contact">Contact</Nav.Link>
            </Nav>

        </Navbar.Collapse>
        </Navbar>
    );
  };
  const HeaderWithRouter = withRouter(Header);
  export default HeaderWithRouter;

但没有成功。

Answer 1

const [show, setShow] = useState(false);
const showDropdown = (e)=>{
    setShow(!show);
}
const hideDropdown = e => {
    setShow(false);
}

  <NavDropdown title="Dropdown" 
   id="collasible-nav-dropdown" 
   show={show}
   onMouseEnter={showDropdown} 
   onMouseLeave={hideDropdown}
   >

我在 React Bootstrap 中将其用于悬停时打开下拉菜单。

Answer 2

NavDropdown 组件首次挂载时不呈现下拉菜单。

CSS 解决方案：您只需在您的 NavDropdown 元素上添加 renderMenuOnMount={true}，如下所示：

<NavDropdown title={name} id={name} renderMenuOnMount={true}>
...menu items...
</NavDropdown>

在 CSS 中：

.nav-item.dropdown:hover .dropdown-menu {
    display: block;
}

Answer 3

使用此代码。

  const [showDropdown, setShowDropdown] = useState(false);
  return (
    <Dropdown
      onMouseLeave={() => setShowDropdown(false)}
      onMouseOver={() => setShowDropdown(true)}
      style={{ width: '166px' }}
    >
      <Dropdown.Toggle
        className="main-style"
        id="dropdown-basic"
      >
        Dropdown Button
      </Dropdown.Toggle>

      <Dropdown.Menu show={showDropdown}>
        <Dropdown.Item href="#/action-1">
          Action
        </Dropdown.Item>
        <Dropdown.Item href="#/action-2">
          Another action
        </Dropdown.Item>
        <Dropdown.Item href="#/action-3">
          Something else
        </Dropdown.Item>
      </Dropdown.Menu>
    </Dropdown>
  );

Codesandbox

Answer 4

将以下代码添加到 css，在沙箱中检查并正常工作。如果您仍有问题，请告诉我。

检查沙箱 sn -p Here

.nav-item:hover .dropdown-menu{
  display:block!important
}

Answer 5

这应该可行：

.nav-item.dropdown:hover .dropdown-menu {
    display: block;
}