时间戳

首页 > 解决方案 > 引导导航栏下拉菜单的纯 javascript 方式

javascript - 引导导航栏下拉菜单的纯 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;

标签： javascriptreactjsreact-bootstrap

解决方案

我们需要changeBackground像这样更改我们的函数，以自动单击onMouseOver事件的下拉按钮：

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

这将单击下拉按钮并打开下拉菜单。如果您需要更多信息，请告诉我。

推荐阅读