чистый javascript путь к bootstrap выпадающему меню - PullRequest
Новая
       4

чистый javascript путь к bootstrap выпадающему меню

0 голосов
/ 25 февраля 2020

Итак, я пытаюсь заставить раскрывающийся код ниже работать с 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;

Ответы [ 2 ]

0 голосов
/ 01 марта 2020

Открытие раскрывающегося меню при наведении курсора не поддерживается в React Bootstrap (вот объяснение: https://github.com/react-bootstrap/react-bootstrap/issues/4042).

Если вы хотите добиться того, чтобы у вас было использовать раскрывающееся меню classi c (реализовано с использованием NavItem, поэтому оно работает так же, как и обычный NavDropdown). Вы должны быть в состоянии использовать свойство show Dropdown.Menu, но это тоже не совсем подходит, поэтому мне пришлось немного импровизировать (скрывать / удалять dropdown.menu в зависимости от состояния).

Вот рабочий пример использования Dropdown.Menu вместо NavDropdown (но с теми же свойствами): https://codesandbox.io/s/falling-cookies-10joi

Основное отличие кода, как я объяснил выше, в использовании компонента Dropdown вместо 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>
0 голосов
/ 25 февраля 2020

Нам нужно изменить нашу функцию changeBackground следующим образом, чтобы автоматически щелкнуть кнопку раскрывающегося списка при событии onMouseOver: 

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

. При этом будет нажата кнопка раскрывающегося списка, и откроется раскрывающееся меню. Пожалуйста, дайте мне знать, если вам нужна дополнительная информация.

...