jquery - 与 Jquery ui 手风琴插件作斗争

Question

我已经使用 jquery ui 手风琴插件构建了这个手风琴，我有点理解它是如何工作的，但我正在努力寻找手风琴关闭鼠标的正确方法。当手风琴部分打开时，我还希望我自己的箭头图标换成向下箭头。这是小提琴：jquery 手风琴插件

任何帮助表示赞赏，即使它指向正确的方向。最重要的是在mouseout时折叠

Answer 1

给你：小提琴

$(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>

Answer 2

这可能会回答您的部分问题

http://jsfiddle.net/Z6LWH/1/

Answer 3

解决方案的另一部分：设置图标类

$( "#accordion" ).accordion({
    event: "mouseover",
    collapsible: true,
    active: false,
    alwaysOpen: false,
    icons: {
        "header": "yourIconClassClosed",
        "headerSelected": "yourIconClassOpen"
    }
});

然后在这些类上设置样式。