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>

这段代码按我想要的方式工作。它是一种水平手风琴。但是，当它加载到我的网页上时，必须隐藏它们的内容 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

您可以将 jquery 选择器用于第一个 div 并将其设置为show(). 就像是 ：

  $('div.accordionContent:first').show();
于 2012-05-23T12:34:18.427 回答
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 回答
0

为什么不使用slideToggle()而不是 IF 语句....

于 2012-05-24T11:53:10.567 回答
0

试试这个非常简单的解决方案

HTML

<div class="accordion-container">
    <div class="accordion-content">
        <div class="accordion-title">Title</div>
        <div class="accordion-toggle">Toggle content</div>
    </div> 
    <div class="accordion-content">
        <div class="accordion-title">Title</div>
        <div class="accordion-toggle">Toggle content</div>
    </div> 
    <div class="accordion-content">
        <div class="accordion-title">Title</div>
        <div class="accordion-toggle">Toggle content</div>
    </div> 
</div>

jQuery

$('.accordion-content .accordion-title').on('click', function(){ 
    $(this).toggleClass('active');
    $('.accordion-title').not($(this)).removeClass('active');
    $(this).next().slideToggle();
    $(".accordion-toggle").not($(this).next()).slideUp();
});
于 2018-04-19T18:20:35.690 回答