3

最初に一連の行 (正確には 100 ピクセル) が表示され、ブログのヘッダーをクリックすると、ブログの投稿が最大の高さに展開されるブログ機能のようなアコーディオンを作成しようとしています。

これは私がこれまでに持っているものです:

HTML:

                    <ul class="blog">

                        <li class="list-item">
                            <div class="list-item-left">
                                <h2 class="expand">Project Eden</h2>

                                <time>07.08.2012</time>
                            </div>
                            <div class="list-item-right">
                                <p>"Sed ut perspiciatis unde </p>                                   
                            </div>
                            <div class="list-item-whitespace"></div>
                        </li>

                        <li class="list-item">
                            <div class="list-item-left">
                                <h2>Project Eden</h2>

                                <time>07.08.2012</time>
                            </div>
                            <div class="list-item-right">
                                <p>"Sed ut perspiciatis unde</p>
                            </div>
                            <div class="list-item-whitespace"></div>
                        </li>

</ul>

jQuery:

var $listItems = $('.list-item');
var closedHeight = 100;
var slideSpeed = 1000;

$(".list-item").click(function() {
  if($(".list-item:animated").length) 
    return false;
}).toggle(function() { 
        var openHeight = $(this).parents("div:first").find(".list-item-right").height();
    $(this).animate({height:openHeight}, slideSpeed,"easeOutExpo");
    $(this).children('.list-item-whitespace').css({'display':'none'});
}, function(){
        $(this).animate({height:100}, slideSpeed,"easeOutExpo");
        $(this).children('.list-item-whitespace').css({'display':'block'});  
});

つまり、基本的に私たちがやっていることです (私の理解では、私は jQuery に関してはまったくの初心者です!):

変数にいくつかの情報を保存してから、.list-item を .list-item-right の実際の高さまで拡張する関数を定義します。もう一度クリックすると、「閉じた状態」に戻ります。 "高さ100px。

今、私がしたいのは、.list-item をクリックしたときに .toggle イベントまたは .click イベントが発生しないようにすることです。

代わりに、.expand クラスまたは .list-item-left h2 (必要な場合) をクリックしたときにのみ起動するようにします。

これが誰にとっても意味がある場合は、私がどこで途方に暮れているか教えてください.

よろしく、K.

4

1 に答える 1

1

これは私がそれを行う方法です。HTML を少し再構築する必要があります。リスト項目の内容を親 div で囲みます。これを使用して、オーバーフローしていない高さを調べます。

リスト項目を展開するときは、状態がわかるようにオープン クラスまたはクローズ クラスを追加します。

また、クリア div であると想像していたものを取り除き、コンテナ divoverflow: autoを指定して、含まれている要素を自己クリアさせました。

http://jsfiddle.net/WZVb6/1/

//set all blog posts to 100px to start
$('li.list-item h2').click(function() {
    $this = $(this);
    var nheight = $this.closest('.naturalheight').height();

    if ($this.hasClass('open')) {
        $this.closest('li').animate({
            height: 100
        });
        $this.removeClass('open');
    }
    else {
        $this.closest('li').animate({
            height: nheight
        });
        $this.addClass('open');
    }

});​
于 2012-04-30T02:24:53.953 に答える