How can I open the react-bootstrap dropdown on mouse hover?

Okay, the question is simple. I need to open the dropdown if I hover over and not click.

Currently my code looks like this.

    <Nav>
      <NavDropdown
        onMouseEnter = {()=> isOpen=true}
        open={isOpen}
        noCaret
        id="language-switcher-container"
      >
        <MenuItem>Only one Item</MenuItem>
      </NavDropdown>
    </Nav>

      

as you can see i tried onMouseEnter but no effect. Can someone fix this problem? What attribute should I pass to achieve this.

API page is here link to react script script

+3


source to share


3 answers


export class Nav extends React.Component {

  constructor(props) {
    super(props)
    this.state = { isOpen: false }
  }

  handleOpen = () => {
    this.setState({ isOpen: true })
  }

  handleClose = () => {
     this.setState({ isOpen: false })
  }

  render() {
    return (
       <Nav>
        <NavDropdown
          onMouseEnter = { this.handleOpen }
          onMouseLeave = { this.handleClose }
          open={ this.state.isOpen }
          noCaret
          id="language-switcher-container"
        >
          <MenuItem>Only one Item</MenuItem>
        </NavDropdown>
      </Nav>
    )
  }
}

      



Hope this solves your problem.

+5


source


A cleaner cleaner CSS solution is here:



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

0


source


You can copy this https://codepen.io/bsngr/pen/frDqh which uses the following JS

$('ul.nav li.dropdown').hover(function() {
  $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
}, function() {
  $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
});

      

Or alternatively you can install a plugin like this https://github.com/CWSpear/bootstrap-hover-dropdown

EDIT: Perfectly fine bootstrap solutions, but I noticed that now you said it is responsive and I haven't used this before, but I don't understand why the js above doesn't work even if it needs tweaking

-1


source







All Articles