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

click事件绑定到span元素，div不是其下一个兄弟元素，div是span父元素的下一个兄弟{ {1}}元素。所以

h2

演示：Fiddle

Answer 2

应该是：

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

由于您要显示和隐藏的信息是next()的{{1}}兄弟.club-list-small-info，这是parent()范围的.club-list-show-small-info

Demo

如果您想获得fade效果，可以使用fadeToggle()：

$('.club-list-show-small-info').click(function(){
    $(this).parent().next().fadeToggle();
});

Demo

jQuery - ＆gt;切换功能

2 个答案: