0

以下のコメントで質問に答えました。フィドルへのリンクを参照してください

以下のjqueryについて少し助けを求めています。

要するに、[About] ボタンをクリックすると、テキストと [閉じる] ボタンを含むアコーディオン (.toggle-container) が開きます。(その部分は私ができます。) この時点で注意が必要なのは、アコーディオンが再び閉じられるまで About ボタンを非表示にすることです。

フィドルから、奇妙なことが起こっていることがわかります。

ページには複数のセクションがあり、一度に 1 つのセクションのみを開く必要があります。

フィドル

<section class="staff-member">
<figure>
    <h2>:(</h2>
    <figcaption>
        <a class="open-profile" href="">About</a>
            <div class="toggle-container">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut aliquet, enim at hendrerit bibendum, leo turpis feugiat risus, id sagittis eros urna auctor lorem. Suspendisse interdum turpis ut est auctor dignissim.</p>
                <a class="close-profile" href="">Close</a>
            </div>
    </figcaption>
</figure>
</section>

(function($, document, undefined){
$('.toggle-container').each(function() {
var $container = $(this);
var $open = $container.siblings('.open-profile');
var $close = $container.find('.close-profile');

$open.on('click', function(e) {
    e.preventDefault();
    $open.hide();
    $container.slideUp('fast');
});
$close.on('click', function(e) {
    e.preventDefault();
    $container.slideDown('fast');
    $open.show();
});
});
})(jQuery, document);
4

1 に答える 1

2

.slideDown1) フィドルから、 andを置き忘れましたslideUp。

2 About を非表示にして閉じる必要はありません。

$open.on('click', function(e) {
        e.preventDefault();
        $container.slideDown('fast');  //corrected it
    });
    $close.on('click', function(e) {
        e.preventDefault();
        $container.slideUp('fast');   //corrected it

    });

このJSFiddleを確認してください

更新: リンクを非表示にする必要があるため、2 番目のポイントを削除してください。

open.on('click', function(e) {
        e.preventDefault();
        $open.hide();   // don't remove        
        $container.slideDown('fast'); //corrected it
    });
    $close.on('click', function(e) {
        e.preventDefault();
        $container.slideUp('fast'); //corrected it
        $open.show();   // don't remove
    });
于 2013-08-14T21:19:40.770 に答える