javascript 如何让手风琴在悬停而不是点击时展开？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11584196/
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 to make accordion to expand on hover not on click?
提问by Suzan Cioc
Is it possible to make accordion to expand on hover not on click? And how to do something else on click?
是否可以让手风琴在悬停而不是点击时展开？以及如何在点击时做其他事情？
UPDATE
更新
I was speaking about jQuery UI accordion widget.
我说的是 jQuery UI 手风琴小部件。
回答by kapa
5th example in the jQuery UI Accordion documentation: Open on mouseover
jQuery UI 手风琴文档中的第 5 个示例：鼠标悬停时打开
$( "#accordion" ).accordion({
event: "mouseover"
});
You can attach any click events you wish to using the .click()or .on('click')methods in plain jQuery. Please research before asking questions like this.
您可以使用普通 jQuery 中的.click()或.on('click')方法附加您希望的任何单击事件。在问这样的问题之前，请先研究一下。
回答by andlrc
Simple css accordion: http://jsbin.com/atamat/edit#html,live
简单的 css 手风琴：http: //jsbin.com/atamat/edit#html,live
.accordion > div {
display:none;
}
.accordion:hover > div {
display:block;
}
HTML:
HTML：
<div class="accordion">
<h2><a href="#link2">Header goes here</a></h2>
<div>
Content goes here
</div>
</div>
<div class="accordion">
<h2><a href="#link2">Header goes here</a></h2>
<div>
Content goes here<br />Content goes here<br />Content goes here<br />
Content goes here<br />Content goes here<br />Content goes here<br />
Content goes here<br />Content goes here<br />Content goes here<br />
</div>
</div>
Simple jQuery solutionn: http://jsbin.com/atamat/2/edit#javascript,html,live
简单的 jQuery 解决方案：http: //jsbin.com/atamat/2/edit#javascript,html,live
$(".accordion > div").hide().parent().hover(function(event) {
$(this).children("div").slideToggle(event.type === "mouseenter");
});
HTML:
HTML：
The same ^
一样的^
