Question

Javascript - jquery、accordion

2012-05-23

1980

javascript jquery html accordion

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

此代码按我的要求工作。它是一个水平手风琴。但是，当它加载到我的网页上时，必须隐藏内容 div 才能使 jquery 工作。

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

Answer 1

您可以使用 jquery 选择器作为第一个 div，并将其设置为 show() 。类似于：

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

Answer 2

我认为你必须尝试这个：-

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

Answer 3

为什么不使用 slideToggle() 来代替 IF 语句....

BlueEyes

2012-05-24