1

私はこのコードを自分で書いたわけではありませんが、大学から問題の解決を手伝ってほしいと頼まれました。私はグーグルをあまり見ていませんので、ここで試してみようと思いました。

function($) {
 var accordion = $('dl > dd').hide().slice(0, 1).show();

 $('dl > dt > a').click(function() {
 accordion.slideUp();
 if($(this).parent().next().is(':hidden'))
 { 
   $(this).parent().next().slideDown();
 }
 return false;
});
})(jQuery);

このコードは、ページのパネルを開いたり閉じたりすることになっています。

この行を変更すると

 var accordion = $('dl > dd').hide().slice(0, 1).show();

この行に

 var accordion = $('dl > dd').hide();

すべてが正常に機能しますが、ページが読み込まれたときに最初のパネルに表示されます。

パネルを開いたときのコードをそのままにしておくと、開いているパネルは閉じません。

4

3 に答える 3

1

これは、フィルタリングして非表示/表示した後、アコーディオン変数に保存されているものと関係があります。あなたが達成しようとしていることは、.showを呼び出さなくても実際に達成することができます

var accordion = $('dl > dd');
accordion.not(':first').hide();
于 2013-01-25T13:24:20.033 に答える
1

問題は、メソッドを使用して要素をフィルタリングしていることです。最後に、アコーディオンは、すべてのアコーディオンslice要素ではなく、1つの選択された要素のみを持つjQueryオブジェクトであり、メソッドを使用できます。end

var accordion = $('dl > dd').hide().first().show().end();

また：

var accordion = $('dl > dd').hide(); 
accordion.first().show();
于 2013-01-25T13:24:32.280 に答える
1

これが私のアコーディオンの実装になります。

CSS

<style type="text/css">
    dd {
        display: none;
    }
</style>

HTML

<dl>
    <dt><a href="#">Slide1</a></dt>
    <dd>
    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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </dd>
    <dt><a href="#">Slide2</a></dt>
    <dd>
    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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </dd>
    <dt><a href="#">Slide3</a></dt>
    <dd>
    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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </dd>
</dl>

JQuery

(function ($)
    {
        var accordionTitle = $('dl > dt > a'),
            accordionSlide = $('dl > dd');

        accordionTitle
            .first()
            .addClass('active')
            .parent()
            .next()
            .slideDown();

        accordionTitle.click(function (e)
        {
            e.preventDefault();

            if (!$(this).hasClass('active'))
            {
                accordionSlide.slideUp();

                $(this).parent().next().stop().slideToggle();

                accordionTitle.removeClass('active');
                $(this).addClass('active');
            }
        });
    })(jQuery);
于 2013-01-25T14:21:38.467 に答える