0

私は jQuery の折りたたみ可能なパネルを作成しようとしていますが、そのためのプラグインはありますが、私が望んでいることを正確に実行するプラグインが見つかりませんでした。ほとんどの場合は機能しますが、機能しないビットが 1 つあります。その理由はわかりません。

(例のページはhttp://www.thekmz.co.uk/misc/cpanel/index1.htmlにあります)

それがどのように機能するか（または場合によっては機能しない可能性があります）

HTML

<div id="container">
    <div class="collapsiblePanel" title="Example Collapsible Panel">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit... etc</p>
    </div>
</div>

Javascript

(function($) {
    $.fn.extend({
        collapsiblePanel: function() {
        return $(this).each(initCollapsiblePanel);
    }
  });
})(jQuery);

function initCollapsiblePanel() {
    if ($(this).children().length == 0) {
        $(this).wrapInner("<div></div>");
    }    
    $(this).children().wrapAll("<div class='cpanelContent'></div>");
    $("<div class='cpanelTitle'><div>" + $(this).attr("title") + "</div><div class='cpanelToggle'>more</div></div>").prependTo($(this));
    $(".cpanelContent", this).hide();
    $(".cpanelTitle", this).click(toggleCollapsiblePanel);
}

function toggleCollapsiblePanel() {
    $(".cpanelContent", $(this).parent()).slideToggle();

    if ($(".cpanelContent", $(this).parent()).is(":hidden")) {
        $(".cpanelToggle", this).html('more');
    } else {
        $(".cpanelToggle", this).html('close');
    }
}

CSS

#container {
    width:300px;
    height:300px;
}

.collapsiblePanel {
    width:100%;
}

.cpanelTitle {
    position:relative;
    width:100%;
    cursor: pointer;
    cursor: hand;
}

.cpanelToggle {
    position:absolute;
    top:0px;
    right:0px;
    font-style:italic;
}

そのため、クラス collapsiblePanel を持つ div を取り、さまざまなネストされた div を作成します。ヘッダーの div には、タイトルと、コンテンツ パネルが展開されているか折りたたまれているかによって、「詳細」または「閉じる」となる右にフロートされるいくつかのトグル テキストが保持されます。

動作しないビットは、

if ($(".cpanelContent", $(this).parent()).is(":hidden")) {

toggleCollapsiblePanel() 関数で。div は問題なく切り替えられるので、コンテンツ div を選択しているようですが、同じものを使用して非表示かどうかを確認すると (cPanelToggleDiv のテキストを変更できます)、常に false として返されます。私はそれを正しくやっていません。

何が起こっているのかを確認するために (上記のリンクの例のページで) そこに大量のコンソール呼び出しを入れましたが、それを見ることができません。

私の絶望/混乱を指摘する助けがあれば大歓迎です.

よろしくナイモア

4

4 に答える 4

2

コールバック メソッドhiddenで状態を確認する必要があります。slideToggleスライドアニメーションが完成しない限り、隠れているかどうかはわかりません。これを試して

thisここでは、スライドしている要素を指す which を使用するなど、他の最適化もいくつか行いました。

function toggleCollapsiblePanel() {
    $(".cpanelContent", $(this).parent()).slideToggle(function(){
    if ($(this).is(":hidden")) {
           $(this).html('more');
       } else {
           $(this).html('close');
       }
   });
}
于 2011-09-02T13:40:01.213 に答える
1

の追加

    var open = false;

initCollapsiblePanel 関数に。

次に、toggleCollapsiblePanel 関数を更新して、次のように置き換えます。

    if ($(".cpanelContent", $(this).parent()).is(":hidden")) {...

次のように:

if (!open) {
    $(".cpanelToggle", this).html('more');
    open  = true;
} else {
    $(".cpanelToggle", this).html('close');
    open = false;

}

これで、more と close のテキストが変更されるはずです (これはあなたの後だと思います)。シ

于 2011-09-02T13:53:02.930 に答える
0

問題は、slideToggle の実行が完了する前にテストが実行されていることです。つまり、表示されたばかりか、フェード アウトしている状態であり、どちらの場合も非表示にはなりません。

テキストの切り替えを、slideToggle コールバック関数に移動する必要があります。次に例を示します。

function toggleCollapsiblePanel() {
    $(".cpanelContent", $(this).parent()).slideToggle(600, function() {
        if ($(this).is(":hidden")) {
            $(this).html('more');
        } else {
            $(this).html('close');
        }   
    });    
}
于 2011-09-02T13:38:51.767 に答える
0

ワーキングデモ

コード：

function toggleCollapsiblePanel() {
    var cCp = $(".cpanelContent", $(this).parent());
    var cT  = $(".cpanelToggle" , this);

    check = cCp.is(":hidden") ? cT.html('close') : cT.html('more') ;
    cCp.slideToggle();
}
于 2011-09-02T14:08:57.100 に答える