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