twitter-bootstrap 如何在鼠标悬停时打开 react-bootstrap 的下拉菜单？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43010814/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I make react-bootstrap's Dropdown open on mouse hover?
提问by W.Chen
Ok the question is simple. I need to make the dropdown open when mouse hover rather than on click.
好吧，问题很简单。我需要在鼠标悬停而不是单击时打开下拉菜单。
Currently my code is as follow.
目前我的代码如下。
<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 solve this issue? What attribute should I pass in to achive this.
如您所见，我试过 onMouseEnter 但没有效果。有人可以解决这个问题吗？我应该传入什么属性来实现这一点。
The API page is here react-bootstrap API page
API 页面在这里react-bootstrap API 页面
回答by Rei Dien
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 issue.
希望这能解决您的问题。
回答by Gary Vernon Grubb
A much cleaner pure CSS solution here:
这里有一个更干净的纯 CSS 解决方案：
.dropdown:hover .dropdown-menu {
display: block;
}
.dropdown:hover .dropdown-menu {
display: block;
}
回答by ian ray
Having just run into this issue myself, I found out you need both the bootstrap CSS and a parameter for react-bootstrap. Add the following CSS:
我自己刚刚遇到这个问题，我发现你需要引导 CSS 和 react-bootstrap 的参数。添加以下 CSS：
.dropdown:hover>.dropdown-menu {
display: block;
}
Then you need to add the parameter renderMenuOnMount={true}for the child elements to render on load:
然后您需要为renderMenuOnMount={true}要在加载时呈现的子元素添加参数：
<NavDropdown renderMenuOnMount={true}>
<NavDropdown.Item href="#">Item #1</NavDropdown.Item>
</NavDropdown>
回答by Schalton
This seems like a hacky solution, but it was the easiest way to keep my app running after updating.
这似乎是一个笨拙的解决方案，但它是更新后保持我的应用程序运行的最简单方法。
With the latest update the dropdown-menuisn't rendered until the button is clicked.
使用最新更新，dropdown-menu直到单击按钮才会呈现。
I've been using this in my css:
我一直在我的 css 中使用它：
.dropdown:hover .dropdown-menu {
display: block;
}
and added this to my component
并将其添加到我的组件中
componentDidMount() {
// TODO: Fix so menu renders automatically w/out click
const hiddenNavToggle = document.getElementById('navbar__hamburger_wrapper-hidden_click')
hiddenNavToggle.click()
hiddenNavToggle.click()
}
I added a wrapping div with the given id just to click for this.
我添加了一个带有给定 id 的包装 div 只是为了点击这个。
I'd love to hear another solution.
我很想听听另一种解决方案。
回答by Ye Cai
base on the answer of @Rei Dien
基于@Rei Dien的回答
onMouseEnter = { this.handleOpen.bind(this) }
onMouseLeave = { this.handleClose.bind(this) }
回答by Dan
You could replicate this https://codepen.io/bsngr/pen/frDqhwhich uses the following JS
您可以复制使用以下 JS 的https://codepen.io/bsngr/pen/frDqh
$('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 could install a plugin like this https://github.com/CWSpear/bootstrap-hover-dropdown
或者，您可以安装这样的插件https://github.com/CWSpear/bootstrap-hover-dropdown
EDIT: Perfectly fine solutions to bootstrap but I noticed now you said its react and I havent used that before but I dont see why the js above wouldnt work even if it requires tweaking
编辑：引导程序的完美解决方案，但我注意到现在你说它的反应，我以前没有使用过，但我不明白为什么上面的 js 即使需要调整也不起作用
