Question

下面我使用jquery来切换显示div。我需要添加什么才能在页面加载时只有第一个结果处于活动状态？

$(document).ready(function(){

//Hide (Collapse) the toggle containers on load
$(".toggle_container").hide(); 

//Switch the "Open" and "Close" state per click then slide up/down (depending on open/close state)
$("h6.trigger").click(function(){
    $(this).toggleClass("active").next().slideToggle("slow");
    return false; //Prevent the browser jump to the link anchor
});

Answer 1

你可以举起你在匹配的第一个h6上注册的点击事件：

$(document).ready(function(){

//Hide (Collapse) the toggle containers on load
$(".toggle_container").hide(); 

//Switch the "Open" and "Close" state per click then slide up/down (depending on open/close state)
$("h6.trigger").click(function(){
    $(this).toggleClass("active").next().slideToggle("slow");
    return false; //Prevent the browser jump to the link anchor
});

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

});

Answer 2

$(function() {
 $("h6.trigger:first").addClass('active');
});

此外，这取代了$(document).ready(function(){})，因为.ready()是一种旧的jquery方式，可以在文档加载时执行某些操作。

Answer 3

您可以使用eq()^(docs)方法或first()^(docs)方法从原始选区中获取第一个匹配项。

$("h6.trigger").click(function(){
    $(this).toggleClass("active").next().slideToggle("slow");
    return false;
}).eq(0).click();
 // ^------^------grab the first element, and trigger the handler

或者作为替代方案，您可以使用triggerHandler()^(docs)方法仅触发第一个方法。

$("h6.trigger").click(function(){
    $(this).toggleClass("active").next().slideToggle("slow");
    return false;
}).triggerHandler('click');
 // -----^--------this will only trigger the click on the first element.

这两种方法都允许您使用原始DOM选择，从而无需重新选择。

修改jquery函数

3 个答案: