我已经使用 jquery ui 手风琴插件构建了这个手风琴,我有点理解它是如何工作的,但我正在努力寻找手风琴关闭鼠标的正确方法。当手风琴部分打开时,我还希望我自己的箭头图标换成向下箭头。这是小提琴:jquery 手风琴插件
任何帮助表示赞赏,即使它指向正确的方向。最重要的是在mouseout时折叠
我已经使用 jquery ui 手风琴插件构建了这个手风琴,我有点理解它是如何工作的,但我正在努力寻找手风琴关闭鼠标的正确方法。当手风琴部分打开时,我还希望我自己的箭头图标换成向下箭头。这是小提琴:jquery 手风琴插件
任何帮助表示赞赏,即使它指向正确的方向。最重要的是在mouseout时折叠
给你:小提琴
$(function() {
$( "#accordion" ).accordion({
event: 'click',
collapsible: true,
active: false,
icons: {
"header": "yourIconClassClosed",
"headerSelected": "yourIconClassOpen"
}
}).on('mouseleave', function() {
$(this).accordion( "option", "active", false );
}).children('li').on('mouseenter', function() {
$(this).find('h3').trigger('click');
});
});
编辑:你必须考虑我重建的 HTML:
<div id="helpmenu">
<ul id="accordion">
<li>
<h3><a href="#">About us</a></h3>
<div class="accordhidden">
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
</div>
</li>
<li>
<h3><a href="#">Section 1</a></h3>
<div class="accordhidden">
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
</div>
</li>
<li>
<h3><a href="#">Section 2</a></h3>
<div class="accordhidden">
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
</div>
</li>
<li>
<h3><a href="#">Section 3</a></h3>
<div class="accordhidden">
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
</div>
</li>
<li>
<h3><a href="#">Section 4</a></h3>
<div class="accordhidden">
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
</div>
</li>
</ul>
</div>
这可能会回答您的部分问题
解决方案的另一部分:设置图标类
$( "#accordion" ).accordion({
event: "mouseover",
collapsible: true,
active: false,
alwaysOpen: false,
icons: {
"header": "yourIconClassClosed",
"headerSelected": "yourIconClassOpen"
}
});
然后在这些类上设置样式。