Jquery上下文：这是父

Question

HTML

我有这个重复的HTML：

<section class="country">
    <header><h1 class="heading"><span>Belgium</span></h1></header>
    <div class="main" style="display: none;">
        <article class="shop">Some content here</article>
    </div>
</section>
<section class="country">
    <header><h1 class="heading"><span>Belgium</span></h1></header>
    <div class="main" style="display: none;">
        <article class="shop">Some content here</article>
    </div>
</section>
<section class="country">
    <header><h1 class="heading"><span>Belgium</span></h1></header>
    <div class="main" style="display: none;">
        <article class="shop">Some content here</article>
    </div>
</section>

的jQuery

$('.country .main').hide();
$('.country header').click(function() {
  $('.country .main').slideToggle(500);
});

问题

如何使用上下文仅滑动最接近单击标题的.main容器，因为现在所有.main容器都会展开。

Answer 1

使用$(this)

 $(this).closest('.country').find('.main').slideToggle(500);

<强> Working Demo

Answer 2

改为使用$(this).next().slideToggle(500);：

$('.country .main').hide();
$('.country header').click(function() {
    $(this).next().slideToggle(500);
});

<强> jsFiddle example