0

アクションをゆっくりと実行する (回答を開く/閉じる) 場合はすべて正常に実行されますが、質問をすばやくクリックし始めると、すべてが台無しになります! jQueryで何かを書くのは初めてです...何が間違っていたのか教えていただけませんか? jsfiddle での実際の例を次に示します: http://jsfiddle.net/cp4Jd/3/

jQuery関数は次のとおりです。

$('.expand').each(function(){
   var reducedHeight = $(this).height();
   $(this).css('height', 'auto');
   var fullHeight = $(this).height();
   $(this).height(reducedHeight);                
   $(this).data('reducedHeight', reducedHeight);
   $(this).data('fullHeight', fullHeight);
}).click(function() {
   $(this).animate({height: $(this).height() == $(this).data('reducedHeight') ? $(this).data('fullHeight') : $(this).data('reducedHeight')}, 500);
   $('.container').animate({height: $(this).height() == $(this).data('reducedHeight') ? 
        ($('.container').height() + $(this).data('fullHeight') - $(this).data('reducedHeight')) : 
        ($('.container').height() - $(this).data('fullHeight') + $(this).data('reducedHeight'))}, 500);                
   ($(this).height() == $(this).data('reducedHeight')) ? 
        ($(this).find('.menu_ico').attr('src', 'img/menu_minus.png')) : 
        ($(this).find('.menu_ico').attr('src', 'img/menu_plus.png'));
   }
);

ありがとうございました。

4

2 に答える 2

1

わかりやすくするために、はるかに単純なバージョンを次に示します。

HTML:

<div class="container">
    <div class="expand">
        <h2>This is a question?</h2>
        <p class="par_menu_content blue">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur.</p>
    </div>
    <div class="expand">
        <h2>Would you like to know the answer?</h2>            
        <p class="par_menu_content blue">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
            ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
            in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
            sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
            mollit anim id est laborum.</p>
    </div>
</div>

jQuery:

$(".par_menu_content").hide();

$(".expand h2").click(function(){
    var $h2 = $(this);
    $(".par_menu_content").slideUp();
    $h2.next().stop(true).animate({height:"toggle"},500);

});

CSS:

.container {
    width: 700px;
    margin-top: 17px;
    margin-left: 15px;
    -webkit-border-radius: 26px;
    -moz-border-radius: 26px;
    border-radius: 26px;
}
.expand {
    margin-left: 17px;
    margin-right: 17px;
    padding: 2px;
    clear: both;
    float:left;
}
.par_menu_content {
    margin-right: 40px;
    margin-left: 40px;
    margin-top: 20px;
}
.blue {
    color:#008597;
}

フィドルはここにあります

于 2013-02-26T17:15:22.977 に答える
1

<p>aを anotherの中に入れることはできません<p>。

私はいつもこの種のアコーディオンを次のようにしています。

<outer wrapper>
    <item>
        <item content wrapper>
            <content>
        </item content wrapper>
    </item>

    <item>
        <item content wrapper>
            <content>
        </item content wrapper>
    </item>

    <item>
        <item content wrapper>
            <content>
        </item content wrapper>
    </item>
</outer wrapper>

次に<item>、修正の高さを指定し、アイテムの高さを<item content wrapper>その高さにアニメートし、2 回目のクリックで元の高さを元に戻します (テストしていません)。

$('.expand').click(function() {
    if ($(this).height() == $(this).data('reducedHeight')) {
        $(this).stop().animate({height: $(this).children().height() + 50 + 'px'}, slow);
    }
    else {
        $(this).stop().animate({height: $(this).data('reducedHeight') + 'px'}, slow);
    }
});
于 2013-02-26T17:02:27.687 に答える