纯javascript引导导航栏下拉列表的方法

因此，我试图让下面代码中的下拉菜单与javascript一起工作，因为我注意到CSS代码只会在用户首次单击下拉菜单后触发下拉菜单。之后，它将让css悬停代码按照正常方式工作

因此，需要一种Javascript方法来让这个下拉列表正常工作

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;

import React，{useState}来自“React”；
从“react bootstrap”导入{Nav、Navbar、NAVDROPOLDOWN、ButtonToolbar、Button}；
从“react router”导入{withRouter}；
导入“../App.css”；
const Header=props=>{
const{location}=props；
功能更改背景（e）{
e、 target.children（'[data toggle=“dropdown”]'）。单击（）；
}
返回(
AdStichr
家
广告商
电台
音频播客
视频播客
案例研究
联系我们
);
};
const HeaderWithRouter=withRouter（标头）；
导出默认HeaderWithRouter；

我们需要像这样更改我们的

changeBackground

功能，以自动单击MouseOver上的下拉按钮事件：

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

这将单击下拉按钮并打开下拉菜单。

---

如果您需要更多信息，请告诉我。

在React引导中不支持通过悬停打开下拉菜单（这里有一个解释：）

如果要实现这一点，必须使用经典下拉菜单（使用NavItem实现，因此其工作原理与通常的NavDropdown相同）。您应该能够使用Dropdown.Menu的show属性，但这似乎也不能很好地工作，所以我不得不临时修改一下（根据状态隐藏/删除Dropdown.Menu）

下面是一个使用Dropdown.Menu而不是NavDropdown（但具有相同属性）的工作示例：

正如我前面解释的，主要代码的区别在于，使用下拉组件而不是NavDropdown来使用show属性：

<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>

出版者
{menuOpen&&(
电台
音频播客
视频播客
)}

只是提醒一下，因为我昨天刚刚发现了这个，React Bootstrap docs state使用

从“React Bootstrap/Nav/”导入Nav；从“react bootstrap/Navbar/”导入Navbar；//etc

与从“react bootstrap”导入{Nav，Navbar}不同，这是因为react呈现大量components@RussellHarrower您需要管理显示下拉列表亲爱的@RussellHarrower，请忘记DOM操作，ReactJS有一种新的思维方式来开发任何东西，您应该使用ReactJS事件处理，而不是像这样使用普通JavaScript：

函数changeBackground（e）{e.target.children（'[data toggle=“dropdown”]'）。单击（）；}

，例如，查看并了解他们是如何开发它来学习ReactJS心态的。但是，当我将鼠标悬停在下拉菜单项上时，框就会消失——我注意到它会自动单击鼠标选择的第一个下拉菜单项。