1 
<div id="wrapper">
    <div class="accordionButton">Personal Information</div>
    <div class="accordionContent">      
    Personal text
    </div>
    <div class="accordionButton">Experience</div>
    <div class="accordionContent">
    Experience information
    </div>
    <div class="accordionButton">Training</div>
    <div class="accordionContent">
    No skills
    <div class="accordionButton">Career</div>
    <div class="accordionContent">
    Never had a job
    </div>
    <div class="accordionButton">Referers</div>
    <div class="accordionContent">
    None.
    </div>
</div>

このコードは私が望むように機能します。横型アコーディオンです。ただし、それが私のWebページにロードされるとき、jqueryが機能するには、コンテンツdivを非表示にする必要があります。

Jquery：

$(document).ready(function() {

    // When div is clicked, hidden content divs will slide out  
    $('div.accordionButton').click(function() {
        $('div.accordionContent').slideUp('normal');    
        $(this).next().slideDown('normal');
    });


    // Close all divs on load page  
    $("div.accordionContent").hide();

});

divを非表示にしないと、すべてのdivが表示されます。jqueryをあまり変更せずに最初のページを表示する方法はありますか、または指定したボタンがクリックされたときに関連コンテンツがそのボタンdivにスライドするように、ボタンとコンテンツに異なるクラス名を設定する必要がありますか？ ？

4

4 に答える 4

2

最初の div に jquery セレクターを使用し、それを として設定できますshow()。何かのようなもの ：

  $('div.accordionContent:first').show();
于 2012-05-23T12:34:18.427 に答える
0

slideToggle()IFステートメントの代わりに使用してみませんか...。

于 2012-05-24T11:53:10.567 に答える
0

私はあなたがこれを試さなければならないと思います：-

<script type="text/javascript">
    $.fn.accordion = function(settings) {
        accordion = $(this);
    }
    $(document).ready(function($) {
        $('div.accordionContent').click(function() {

            if($(this).next().is(":visible")) {
                $(this).next().slideDown();
            }

            $('div.accordionContent').filter(':visible').slideUp();
            $(this).next().slideDown();
            return false;
        });
    });

</script>
于 2012-05-23T12:44:05.290 に答える