jquery - Jqueryuiアコーディオンプラグインとの闘い

Question

私はjqueryuiアコーディオンプラグインを使用してこのアコーディオンを構築しました。それがどのように機能するかはある程度理解していますが、アコーディオンをマウスで閉じる正しい方法を見つけるのに苦労しています。また、アコーディオンセクションが開いているときに、自分の矢印アイコンを下矢印に交換したいと思います。これがフィドルです：jqueryアコーディオンプラグイン

それが正しい方向を指しているだけであっても、どんな助けもありがたいです。最も重要なことは、マウスアウトで崩壊することです

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

ソリューションのもう1つの部分：アイコンクラスを設定する

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

そして、それらのクラスにスタイルを設定します。

Answer 3

これはあなたの質問の一部に答えるかもしれません

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