引导导航栏下拉菜单的纯 javascript 方式

Question

So I am trying to make the dropdown in the below code work with javascript as I noticed that the CSS code will only trigger the dropdown after a user first clicks on the dropdown. after that, it will let the css hover code work as per normal.

So needing a Javascript way to get this drop down to work.

import React, { useState  } from "react";
import {Nav, Navbar, NavDropdown, ButtonToolbar, Button } from "react-bootstrap";
import { withRouter } from "react-router";

import '../App.css';

const Header = props => {
    const { location } = props;

    function changeBackground(e) {
        e.target.children('[data-toggle="dropdown"]').click();
    }

    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={changeBackground}>

                <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>
            <ButtonToolbar>
                <Button href="/contact" variant="success" size="lg" className="button-round">
                    Contact Us
                </Button>
            </ButtonToolbar>
            </Nav>

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

Answer 1

We need to change our changeBackground function like this, to auto click the dropdown button on onMouseOver event:

changeBackground = (e) => {
  e.target.click();
};

This will click the dropdown button and open the dropdown menu. Please let me know if you need further information.

Answer 2

Opening the dropdown menu by hovering is not supported in React Bootstrap (here is an explanation: https://github.com/react-bootstrap/react-bootstrap/issues/4042 ).

If you'd like to achieve that you have to use the classic dropdown menu (implemented using NavItem so it works the same as the usual NavDropdown). You should be able to use the show property of Dropdown.Menu - but that doesn't seem to work perfectly either so I had to improvise a bit (hiding/removing the dropdown.menu based on state).

Here is a working example using Dropdown.Menu instead of NavDropdown (but with the same properties): https://codesandbox.io/s/falling-cookies-10joi

The main code difference is, as I explained above, using the Dropdown component instead of NavDropdown to be able to use the show property:

<Dropdown as={NavItem} alignRight onMouseLeave={closeMenu}>
  <Dropdown.Toggle
    id="basic-nav-dropdown"
    as={NavLink}
    onMouseEnter={openMenu}
  >
    Publishers
  </Dropdown.Toggle>

  {menuOpen && (
    <Dropdown.Menu show={true}>
      <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>
    </Dropdown.Menu>
  )}
</Dropdown>