在页面加载时自动显示 jquery 手风琴的 1 部分，而不是最初隐藏所有部分

Question

我有以下 Javascript 代码，它控制手风琴类型的 div 集。 这组 div 是这样构建的：

<h1>click here to show next div</h1>
<div>text to show</div>
<h1>click here to show next div</h1>
<div>text to show</div>
<h1>click here to show next div</h1>
<div>text to show</div>

我假设你们都知道手风琴是如何工作的。 H1 标签是 onclick 的触发器，它显示下一个 div 但隐藏所有其他 div。

<script language="javascript"><!--
$(document).ready(function(){
  toggler();
});
function toggler() {

$('.trigger').click( function() {
    if ( $(this).hasClass('trigger_active') ) {
        $(this).next('.toggle_container').slideToggle('fast');
        $(this).removeClass('trigger_active');
    } else {
        $('.trigger_active').next('.toggle_container').slideToggle('fast');
        $('.trigger_active').removeClass('trigger_active');
        $(this).next('.toggle_container').slideToggle('fast');
        $(this).addClass('trigger_active');
    };
return false;
});
}
//--></script>

现在，在页面加载时，所有 div 都将被关闭，这有点愚蠢。 我现在想做的是在页面加载时激活第一个 div，这样用户就不必单击它。 你知道如何做到这一点吗？ 我试图给第一个 div 一个唯一的 ID 并在 DOM 加载时 show() 它，但是如果我单击其他触发器它就不会崩溃（它永远不会隐藏）

Answer 1

您可以在加载时触发第一次实际点击：

$(function() {
    // ...
    $('.trigger:first').click();
}

但是，在您的 HTML 中没有 .trigger，这是正确的吗？

Answer 2

在页面加载时模仿点击事件对我来说并不干净。您可能只需要为您的第一个项目分配类别。查看这个 jsFiddle 作为示例。

Answer 3

您可以在页面加载方法中调用.trigger的click函数

$(document).ready(function(){
  toggler();
 $('.trigger:first').click();
});