0

これは私がまだ持っているものです：

<script type="text/javascript">
    $(function() {
        $("#accordion").accordion({
            collapsible: false,
            autoHeight: false,<br/>
            navigation: true,
            header: 'p.menuitem'
        });
        $("p.menuitem a").click(function(event){
            window.location.hash=this.hash;
        });
    });
</script>

<div id="accordion">
    <div>
        <p class="menuitem" id="item1"><a href="#item1">Section1</a></p>
        <div>Phasellus mattis <a href="#item2">tincidunt</a> nibh.</div>
    </div>
    <div>
        <p class="menuitem" id="item2"><a href="#item2">Section2</a></p>
        <div>Nam dui erat, auctor a, dignissim quis.</div>
    </div>
    <div>
        <p class="menuitem" id="item3"><a href="#item3">Section3</a></p>
        <div>Nam dui erat, auctor a, dignissim quis.</div>
    </div>
</div>

お気づきのとおり、アコーディオンのセクション 1 にスキップ リンクがあります。解決すべき問題は次のとおりです。

  1. 前述のスキップ リンクは、このページを呼び出すときにアコーディオン セクション 2 が開かないようにします。

    http://www.domain.tld/index.htm#item2

    一方、他のものは、

    http://www.domain.tld/index.htm#item1

    また

    http://www.domain.tld/index.htm#item3

    まだうまくいっています。

  2. スキップ リンクをクリックしても、アコーディオンのセクション 2 は開きません。これらのことを機能させる機会はありますか？私はたくさん検索しましたが、成功しませんでした。

4

1 に答える 1

0

両方の問題が解決！

<script type="text/javascript">
    $(function() {
        $("#accordion").accordion({
            collapsible: false,
            autoHeight: false,
            navigation: true,
            header: 'p.menuitem'
        });

        $("p.menuitem a").click(function(event){
            window.location.hash=this.hash;
        });

        if($(location).attr("hash")) $("a[hash="+$(location).attr("hash")+"]").click();
    });

    function openpanel(section) {   
        $("#accordion").accordion("activate", section);
    }
</script>

<div id="accordion">
    <div>
        <p class="menuitem" id="item1"><a href="#item1">Section1</a></p>
        <div>Phasellus mattis <a href="#item2" onclick="javascript:openpanel(1)">tincidunt</a> nibh.</div>
    </div>
    <div>
        <p class="menuitem" id="item2"><a href="#item2">Section2</a></p>
        <div>Nam dui erat, auctor a, dignissim quis.</div>
    </div>
    <div>
        <p class="menuitem" id="item3"><a href="#item3">Section3</a></p>
        <div>Nam dui erat, auctor a, dignissim quis.</div>
    </div>
</div
于 2011-06-15T10:55:20.943 に答える