该链接不会切换下一个div元素

Question

到目前为止，我已经多次搜索过这个问题而且我已经找到了很多东西。但没有什么对我有用。所以现在我提出自己的问题..

HTML

<article class="user">
    <section class="userBar">
        <p>
            <span class="arrow"><a class='arrow' href='#infos'>↓</a></span>
        </p>
    </section>
    <div class="hiddenInfos">
        <p>Here are the infos</p>
    </div>
</article>

的JQuery ..

$(document).ready(function(e) {
    $('a.arrow').click(function() {
        $(this).next('div.hiddenInfos').slideToggle('slow');
    });
});

我尝试了很多想法：

1. .parent（）
2. .siblings（）
3. .closest（）

所以当我点击箭头时，没有什么可以切换我的div元素。

JSFiddle

Answer 1

$(document).ready(function(e) {
    $('a.arrow').click(function() {
        $(this).closest('.userBar').next('div.hiddenInfos').slideToggle('slow');
    });
});

或者您可以使用

 $(document).ready(function(e) {
        $('a.arrow').click(function() {
            $(this).closest('.user').find('div.hiddenInfos').slideToggle('slow');
        });
    });

或者您可以使用

$(document).ready(function(e) {
            $('a.arrow').click(function() {
                $(this).parent().parent().parent().next('div.hiddenInfos').slideToggle('slow');
            });
        });