0

クライアントのポッドキャスト アーカイブ ページのリストを作成する必要があります。このページを開くと、クリックした月のさまざまなポッドキャストへのリンクが表示されます。ここのページの右側にあるデフォルトのブログアーカイブウィジェットにBlogSpotが持っているのとまったく同じものが欲しいです: http://kimrome.blogspot.com/

http://thehummingbirdplace.com/test2.htmlでそのようなものを作成できましたが、リストが展開されているかどうかを示す矢印を作成する方法がわかりません。そのため、クリックすると方向を変え、もう一度クリックしてそのセクションを閉じると前の方向に戻る必要があります。

私のバージョンには、ページを開いたときに表示される子要素もあり、親がクリックされるまでそれらを展開したくありません。

これを行うために jQuery が既に作成されているかどうか、またはどのように作成できるかをオンラインで調べましたが、この全体が適切にタイトル付けられているかどうかわからないため、さまざまな結果が得られます。どんな助けでも大歓迎です!!

4

2 に答える 2

2

jQuery-UIアコーディオンを試す

$(...).accordion();

、またはこれ: http://jsfiddle.net/5SKLV/1/

$(...).myAccordion();

好みに合わせて CSS を記述してください。

于 2013-11-05T07:01:35.677 に答える
1

これを自分でやりたい場合 (自分で書くのは楽しいです):

#treerootにの ID を追加し、レベル 1の<ul>テキストを でラップしました。<li><span>

<ul id="tree">
    <li>
        <span>parent1</span>
        <ul>
            <li>child11</li>
            <li>child12</li>
        </ul>
    </li>
    <li>
        <span>parent2</span>
        <ul>
            <li>child21</li>
            <li>child22</li>
        </ul>
    </li>
</ul>

親要素に左右を指す矢印を適用するには、たとえば、背景を持つ 2 つの CSS クラスを作成します (別の場所で背景画像を見つけるか、独自に作成する必要があります)。

.opened > span {
    background: url('arrow_pointing_down.png') left top;
    color: #0a0; /* just to make it easy to know which class it has */
}
.closed > span {
  background: url('arrow_pointing_right.png') right top;
    color: #00a; /* just to make it easy to know which class it has */
}

ページの読み込み時にすべての子要素を非表示にするには...

$('#tree > li').addClass('closed');
// hide the level 2 ul's
$('#tree > li ul').hide();

次に、クリック ハンドラーで次のようにします。

$("#tree > li > span").click(function (event) {
    event.preventDefault();
    // swap the opened and closed classes
    $(this).parent().toggleClass('opened closed');
     // toggle the level 2 ul instead of li
    $(this).parent().find("ul").toggle();
});

ここでの動作デモ: http://jsfiddle.net/cTLGN/

追加：

このデモ コードでは、読みやすくするために jQuery オブジェクトへのキャッシュ参照を使用していません。実際には、次のことを行う代わりに:

$(this).parent().toggleClass('opened closed');
$(this).parent().find("ul").toggle();

... すべきこと:

var parent = $(this).parent(); // search the DOM once for this' parent, and remember it
parent.toggleClass('opened closed');
parent.find("ul").toggle();

.. jQuery の $() コンストラクターを使用するたびに、DOM 全体を検索する必要があるため、繰り返し実行すると非常にコストがかかる可能性があります。

于 2013-11-05T07:05:09.317 に答える