javascript - jQuery -> 切换功能

Question

我有一个包含事件的列表。我对数组使用 foreach 来检索数据。我的列表如下所示:

<article class="club-list-club">
            <h2 class="club-list-title">
                <a href="'.url('clubs/'.$club->getSlug()).'">'.$club->getClubnaam().'</a>
            </h2>
            <h2 class="club-list-location">
                '.$club->getWoonplaats().'
            </h2>
            <h2 class="club-list-open-info">
                Openingstijden
            </h2>

            <h2 class="club-list-big-info">
                link2page
            </h2>
            <h2 class="club-list-small-info">
                <span class="club-list-show-small-info">Show</span>
            </h2>
            <div class="more-info hide">
                Hier wat informatie over de club zelf die kort word weergeven. je vind hier de openingstijden en alle
                andere belangrijke info. Hier wat informatie over de club zelf die kort word weergeven. je vind hier de
                openingstijden en alle andere belangrijke info.
            </div>
        </article>';

当单击 SPAN .club-list-show-small-info 时，我希望第一个 div.more-info 可以淡入淡出或滑动切换。我在下面的代码中做错了什么:

<script type="text/javascript">
$(document).ready(function(){
    $('.club-list-show-small-info').click(function(){
        $(this).next('div').slideToggle('.hide');
    });
});
</script>

Answer 1

点击事件绑定(bind)到span元素，div不是它的下一个同级元素，div是它的下一个同级元素span 的父 h2 元素。所以

$(document).ready(function () {
    $('.club-list-show-small-info').click(function () {
        $(this).parent().next('div').slideToggle();
    });
});

演示:Fiddle