Question

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

任何帮助都会受到赞赏，即使它指向正确的方向。最重要的是在mouseout上崩溃

Answer 1

在这里：fiddle

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

解决方案的另一部分：set icon classes

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

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

与Jquery ui手风琴插件挣扎

3 个答案: