jquery - マルチレベルでJquery UIアコーディオンを作成し、アクティブなページで開いたままにする方法

Question

マルチレベルで作成jquery ui accordionし、アクティブなページで開いたままにする方法について助けが必要です。私はjquery ui accordion1つのレベルだけでうまく使いました。しかし、次のレベルを追加すると、クリックすると子ウィンドウが常に閉じます

最後の質問は、リストをクリックした後、リロード ページでアコーディオンを開いたままにする方法です。「アクティブ」を試しましたが、運がありません:(

これは私のhtmlコードです:

<ul class="accordion">
<h3>Hardware</h3>
<li>
    <ul class="accordion2">
        <li>
            <h3>Monitor</h3>
            <ul>
                <li>Monitor Tube</li>
                <li>Monitor LCD</li>
            </ul>
        </li>
        <li>PC</li>
        <li>Keyboard</li>
        <li>Mouse</li>
    </ul>
</li>
<h3>Software</h3>
<li>
    <ul class="accordion2">
        <li>Unix</li>
        <li>Linux</li>
        <li>Windows</li>
    </ul>
</li>

これは私のjquery関数コードです:

    $(function() {
    $(".accordion").accordion({
        header: "h3",
        autoHeight: false,
        navigation: true,
    });
});
$(function() {
    $(".accordion2").accordion({
        header: "h3",           
        autoHeight: false,
        navigation: true,
    });
});

これが私のフィドルです。