0

アコーディオンを作成するために XSLT を使用している xml ドキュメントがあります。フォルダーに子がある場合、xslt/xml は h3 のアコーディオンのみを作成する必要があります。同時に、単一ページのリンクを生成するにはアコーディオンが必要です。どうすればこれを達成できますか? 順序は重要なので、単一ページのリンクをアコーディオン div の外に移動することはできません。

Google へのシングル ページ リンクがアコーディオンを壊します。すべての要素 h3s を保持したいと思います。アコーディオンに div 兄弟を持たない h3 を無視させる方法はありますか?

http://jsfiddle.net/gcqmv/

<div id="accordion">
    <h3>Section 1</h3>
    <div>
            <ul>
            <li>List item one</li>
            <li>List item two</li>
            <li>List item three</li>
        </ul>
    </div>


    <h3>Section 2</h3>
    <div>
            <ul>
            <li>List item one</li>
            <li>List item two</li>
            <li>List item three</li>
        </ul>
    </div>

    <h3><a href="google.html">Single Page Link to Google</a></h3>

    <h3>Section 3</h3>
    <div>
        <ul>
            <li>List item one</li>
            <li>List item two</li>
            <li>List item three</li>
        </ul>
    </div>

</div>
4

2 に答える 2

0

Google リンクの後の ul タグには、開始 "<" がありません。a にも終了タグがないため、Google へのライブ リンクをたどっています。私もそれをhtml構造に投げ込みましたが、うまくいくようです。 

<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
<div id="accordion">
    <h3>Section 1</h3>
    <div>
            <ul>
            <li>List item one</li>
            <li>List item two</li>
            <li>List item three</li>
        </ul>
    </div>


    <h3>Section 2</h3>
    <div>
        <ul>
            <li>List item one</li>
            <li>List item two</li>
            <li>List item three</li>
        </ul>
    </div>

    <h3><a href="google.html">Single Page Link to Google</a></h3>

    <h3>Section 3</h3>
    <div>
        <ul>
            <li>List item one</li>
            <li>List item two</li>
            <li>List item three</li>
        </ul>
    </div>

</div>
</body>
</html>
于 2013-10-09T20:46:53.930 に答える
0

将来のスタックオーバーフラワーのために、ヘッダー クラスでアコーディオン コードをターゲットにしました。

    <script>
    $(function() {

        $("h3").siblings(".banner").not(".active").hide();



        $( "#accordion" ).accordion( { header: 'h3.folder', collapsible: true});
    });
    </script>
</head>
<body>

<div id="accordion">
    <h3 class="folder">Section 1</h3>
    <div>
            <ul>
            <li>List item one</li>
            <li>List item two</li>
            <li>List item three</li>
        </ul>
    </div>


    <h3 class="folder">Section 2</h3>
    <div>
            <ul>
            <li>List item one</li>
            <li>List item two</li>
            <li>List item three</li>
        </ul>
    </div>

    <h3><a href="google.html">Single Page Link to Google</a></h3>

    <h3 class="folder">Section 3</h3>
    <div>
        ul>
            <li>List item one</li>
            <li>List item two</li>
            <li>List item three</li>
        </ul>
    </div>

</div>
于 2013-10-10T13:13:25.930 に答える