Javascript 如何将jQuery accordion默认设置为未打开？和开关打开/关闭？

所以我有一个有大量手风琴的页面，当第一个页面开始加载时，默认情况下每个手风琴都会打开，直到我点击一个为止。然后他们都很接近，但那一个，然后从那里开始工作

HTML

JS

以及相关的代码笔：

所以我的问题是：
1.如何在页面加载时将它们默认全部关闭？
2.如何通过再次单击“激活”按钮来关闭活动按钮

任何帮助都将不胜感激

问题1的解决方案

---

将

display:none

添加到我的内容元素。

在CSS中设置

display:none

，以启动并更改代码，使其更智能地隐藏内容

jQuery('.ss_button').on('click',function() {
    var content = jQuery(this).next('.ss_content');
    jQuery('.ss_content').not(content).slideUp('fast');
    content.toggleSlide('fast');
});

---

在CSS中设置

display:none

，以启动并更改代码，使其更智能地隐藏内容

jQuery('.ss_button').on('click',function() {
    var content = jQuery(this).next('.ss_content');
    jQuery('.ss_content').not(content).slideUp('fast');
    content.toggleSlide('fast');
});

---

要使用现有代码执行此操作，您需要一个document.ready函数，该函数将关闭内容：

$(document).ready(function() {

    $('.ss_content').hide();

    $('.ss_button').on('click',function() {
        $('.ss_content').slideUp('fast');
        $(this).next('.ss_content').slideDown('fast');
    });
});

但是，这将导致页面加载时，您的内容在一秒钟内可见。更好的方法是使用CSS类：

$(document).ready(function() {

    $('.ss_button').on('click',function() {
        var menu = $(this).closest('.ss_menu');
        if (menu.hasClass('open')) {
            $('.ss_menu.open').removeClass('open');
            menu.addClass('open');
        }
        else {
            menu.removeClass('open');
        }
    });
});

然后在CSS中，将所有内容设置为默认状态“closed”，但当其父类具有打开类时，将其设置为“open”：

.ss_menu {
    overflow:hidden;
}

.ss_menu.open .ss_content {
    opacity:1;
    max-height:1000px; /*set this to a height much bigger than you expect*/
}
.ss_content {
    max-height:0;
    opacity:0;
    transition:all 0.2s ease-out; /*or whatever transition you want*/
}

---

另外，一个页面中不能有多个具有相同id的项目-我认为这是一个错误，并将

ss_菜单

用作类而不是id选择器

要使用现有代码执行此操作，您需要一个document.ready函数来关闭内容：

$(document).ready(function() {

    $('.ss_content').hide();

    $('.ss_button').on('click',function() {
        $('.ss_content').slideUp('fast');
        $(this).next('.ss_content').slideDown('fast');
    });
});

但是，这将导致页面加载时，您的内容在一秒钟内可见。更好的方法是使用CSS类：

$(document).ready(function() {

    $('.ss_button').on('click',function() {
        var menu = $(this).closest('.ss_menu');
        if (menu.hasClass('open')) {
            $('.ss_menu.open').removeClass('open');
            menu.addClass('open');
        }
        else {
            menu.removeClass('open');
        }
    });
});

然后在CSS中，将所有内容设置为默认状态“closed”，但当其父类具有打开类时，将其设置为“open”：

.ss_menu {
    overflow:hidden;
}

.ss_menu.open .ss_content {
    opacity:1;
    max-height:1000px; /*set this to a height much bigger than you expect*/
}
.ss_content {
    max-height:0;
    opacity:0;
    transition:all 0.2s ease-out; /*or whatever transition you want*/
}

---

另外，一个页面中不能有多个具有相同id的项目-我认为这是一个错误，并将

ss_菜单

用作类而不是id选择器

那不是我以为你说的jQuery ui手风琴。。。。设置css以在启动页面时隐藏它们。将

display:none

添加到css。还有，谢谢你。真不敢相信我竟然没想到。。。关于问题2有什么帮助吗？那不是我想你说的jQuery ui手风琴。。。。设置css以在启动页面时隐藏它们。将

display:none

添加到css。还有，谢谢你。真不敢相信我竟然没想到。。。对问题2有什么帮助吗？