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时显示它（）然后如果我点击其他触发器它将不会崩溃（它永远不会隐藏）

Answer 1

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

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

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

Answer 2

您可以在页面加载方法

上调用.trigger的单击功能

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

Answer 3

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

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

3 个答案: