如何将jQuery手风琴默认设置为未打开？并切换打开/关闭？

Question

因此，我有一个有大量手风琴的页面，当第一次初始加载每一个手风琴时，都会打开，直到我点击一个手风琴。然后他们都关闭了，但那一个，然后从那里工作很好。

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 

<div id="ss_menu"> 
    <a class="ss_button">Accordion 1</a> 
    <div class="ss_content"> 
    Content 1 
    </div> 
</div> 

<div id="ss_menu"> 
    <a class="ss_button">Accordion 2</a> 
    <div class="ss_content"> 
    Content 2 
    </div> 
</div> 

<div id="ss_menu"> 
    <a class="ss_button">Accordion 3</a> 
    <div class="ss_content"> 
    Content 3 
    </div> 
</div> 

CSS

/* Accordion controls */ 
#ss_menu { 
    border: 1px solid #ccc; 
} 

.ss_button { 
    cursor: pointer; 
    color: black; 
} 

.ss_content { 
    padding: 5px 10px; 
    text-decoration: none; 
    color: #666; 
    font-family: arial, verdana, tahoma; 
    font-size: 10px; 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    transition: all 0.5s; 
    -webkit-transition: all 0.5s; 
    -moz-transition: all 0.5s; 
} 

JS

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

及相关Codepen：http://codepen.io/jacob_johnson/pen/zvdQGO

所以我的问题是：
1.如何在页面加载时将它们全部设置为默认关闭？
2.如何通过再次点击激活按钮来切换一个活动的关闭？

任何帮助，将不胜感激。

解决问题1
添加display: none到我的内容元素。

Answer 1

在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'); 
}); 

Answer 2

要使用你的代码做到这一点，你需要的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

然后，设置一切封闭的默认状态，但动画它打开时，其父母有公开课：

.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*/ 
} 

PS一个页面中不能有多个项目具有相同的ID - 我认为这是一个错误，并且使用ss_menu作为类而不是ID选择器。