2011-02-10 4 views
2

Ниже я использую jquery для переключения div div. Что мне нужно добавить к этому, чтобы только первый результат был активным при загрузке страницы?Изменение функции jquery

$(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 
}); 

ответ

0

Вы можете получить первое совпадение от исходного выбора с использованием метода 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, предотвращая необходимость повторного выбора.

+0

Есть ли способ не анимировать первый матч? так что он уже активен, когда страница загружается – mwimwi76

+0

@ mwimwi76: вместо запуска обработчика вы можете сделать что-то вроде этого: '.eq (0) .addClass (« active »). next(). show();' Или вы можете просто добавить класс, а не скрыть первый контейнер для начала. '$ (". toggle_container "). slice (1) .hide();' * (скрыть все, кроме первого контейнера) * '$ (" h6.trigger "). click (function() {/*..* /}). eq (0) .addClass ('active'); '* (добавить активный класс к первому элементу) * – user113716

+0

awesome! работает отлично. Благодаря! – mwimwi76

0

Вы можете просто поднять событие щелчка вы зарегистрировали на первом 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'); 

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

Кроме того, что идет вместо $(document).ready(function(){}), так как .ready() старый JQuery способ сделать что-то при загрузке документа.

Смежные вопросы