Javascript - jquery，手风琴答案

【问题标题】：Javascript - jquery,accordionJavascript - jquery，手风琴
【发布时间】：2012-05-23 12:31:17
【问题描述】：

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

【问题讨论】：

你是否意识到已经有一个 jQuery UI 控件用于此。 jqueryui.com/demos/accordion

标签： javascript jquery html accordion

【解决方案1】：

您可以对第一个 div 使用 jquery 选择器并将其设置为show()。类似的东西：

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

【讨论】：

我设法通过将 div 手风琴内容设置为在 css 中不显示来删除关于关闭加载页面上所有 div 的 jquery 位。但是，使用您给我的功能，它仍然没有任何作用。在 javascript 控制台中没有收到任何错误或任何内容，我正在添加： $('div.accordionContent').first().show(); });在点击功能下方。
@AnthonyDo 也许我们的问题搞错了。它工作正常。 jsfiddle.net/t9vYY

【解决方案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>

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

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();
});

【讨论】：