Javascript - jquery， Accordion

Question

<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>

此代码按我希望的方式工作。这是一个水平 Accordion 。但是，当它加载到我的网页上时，必须隐藏它们的内容 div 才能使我的 jquery 工作。

J查询:

$(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 滑出？

Answer 1

您可以为第一个 div 使用 jquery 选择器并将其设置为 show()。像这样的东西:

  $('div.accordionContent:first').show();