0

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

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

4

3 回答 3

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>
于 2012-06-26T14:59:38.490 回答
0

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

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

于 2012-06-26T14:20:44.833 回答
0

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

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

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

于 2012-06-26T14:34:59.040 回答