jQuery задумываясь, как использовать контекст в функциях

Question

Мне нужна помощь, чтобы понять, как реализовать функции, которые можно использовать более гибким способом. Скажем, у меня есть этот HTML:

<h3 class="heading">Heading</h3> 
<ul class="links"> 
    <li><a href="#">Link</a></li> 
    <li><a href="#">Link</a></li> 
    <li><a href="#">Link</a></li> 
    <li><a href="#">Link</a></li> 
    <li><a href="#">Link</a></li> 
</ul> 

- и этот сценарий:

$('.heading').click(function() { 
    $(this).next().slideToggle(); 
}); 

Он работает, как задумано, но я хотел бы сделать функцию более общего, поэтому он может быть использован и в других контексты - что-то вроде этого:

$('.heading').click(function() { 
    collapse(); 
}); 
var collapse = function() { 
    $(this).next().slideToggle(); 
} 

Это, очевидно, не работает, как $(this) не определен. Но как я могу добиться чего-то подобного? Fiddle.

Answer 1

Вам нужно передать объект элемента, а также:

$('.heading').click(function() { 
    collapse(this); 
}); 
var collapse = function(_obj) { 
$(_obj).next().slideToggle(); 
} 

Working Demo