jQuery Toggle First Opened

Question

我想通过在toggle的容器中添加一个额外的类来在页面加载时打开第一个切换。我该怎么办？

这是我的切换脚本：http://jsfiddle.net/gKAFT/

$(".toggle-container").hide();
$(".trigger").toggle(function(){
    $(this).addClass("active");
    }, function () {
    $(this).removeClass("active");
});
$(".trigger").click(function(){
    $(this).next(".toggle-container").slideToggle();
});

问候。

Answer 1

您可以触发事件：

$(".trigger").click(function(){
    $(this).next(".toggle-container").slideToggle();
}).first().click();

http://jsfiddle.net/sAxC7/

请注意，toggle方法已弃用，您可以改为使用toggleClass：

$(".trigger").click(function(){
    $(this).toggleClass('active').next(".toggle-container").slideToggle();
}).first().click();

http://jsfiddle.net/B3Luc/

Answer 2

使用拳头选择器：

$(".trigger:first").next(".toggle-container").slideToggle();

Fiddler：http://jsfiddle.net/cXhQN/

然而，这不适用于SEO，因为Search engindes不会执行JavaScript。

Answer 3

您可以使用此解决方案：

jQuery(document).ready(function($) {       

    $(".toggle-container").hide(); 
    $(".trigger").toggle(function(){
        $(this).addClass("active");
        }, function () {
        $(this).removeClass("active");
    });
    $(".trigger").click(function(){
        $(this).next(".toggle-container").slideToggle();
    });

    $('.toggle-container').first().show(); 
});
​

这是fiddle。 不同的是显示第一个切换容器的最后一行$('.toggle-container').first().show();。

Answer 4

$(".trigger:first").trigger("click");