关于多个DIV展开收缩，请教有哪些的不对？点击无效

Question

如下
html:

<div class="welfare_list">
    <ul class="title" id="tab_0">
        <li>
            <dl class="fl">手机尾号（8909）</dl>
            <dl class="fr arrow"><i class="fa fa-chevron-up"></i></dl>
        </li>
    </ul>
    <ul class="content hide" id="content_0">
        <li>
            <dl class="fl">设备编号：<span>21502156456254</span></dl>
            <dl class="fl"></dl>
            <dl class="fr"><a href="" class="button gray">领取</a></dl>
        </li>
    </ul>
</div>
<div class="welfare_list">
    <ul class="title" id="tab_1">
        <li>
            <dl class="fl">手机尾号（8909）</dl>
            <dl class="fr arrow"><i class="fa fa-chevron-up"></i></dl>
        </li>
    </ul>
    <ul class="content" id="content_1">
        <li>
            <dl class="fl">设备编号：<span>21502156456254</span></dl>
            <dl class="fl"></dl>
            <dl class="fr"><a href="" class="button gray">领取</a></dl>
        </li>
    </ul>
</div>
<div class="welfare_list">
    <ul class="title" id="tab_2">
        <li>
            <dl class="fl">手机尾号（8909）</dl>
            <dl class="fr arrow"><i class="fa fa-chevron-up"></i></dl>
        </li>
    </ul>
    <ul class="content hide" id="content_2">
        <li>
            <dl class="fl">设备编号：<span>21502156456254</span></dl>
            <dl class="fl"></dl>
            <dl class="fr"><a href="" class="button gray">领取</a></dl>
        </li>
    </ul>
</div>

JS:

$(document).ready(function(){
    var tab = document.getElementsByClassName('welfare_list');
    for (var i = 0; i < tab.length; i++) {
        $('#tab_'+i).on('click', function() {
            if ($('#content_'+i).is(':hidden')) {
                $('#content_'+i).slideDown('fast');
                $('#tab_'+i+' .arrow').html('<i class="fa fa-chevron-down"></i>');
            } else {
                $('#content_'+i).slideUp('fast');
                $('#tab_'+i+' .arrow').html('<i class="fa fa-chevron-up"></i>');

            }
        });
    };
});

请问哪里有问题呢？这样弄，点击无效~

Answer 1

你这样循环只会执行最后的i,
;这个元素的获取,你可以使用$(this)来 获取兄弟元素,因为$(this)只会是你当前点击的这个元素,所以获取的兄弟元素也是当前点击的元素的兄弟元素,就不要拼接字符串了

Answer 2

你好 jq的 toggleSlide()是不是被弃用了?如果没有，可以用这个方法

Answer 3

$(".welfare_list").on("click",'.title',function(){
    $(this).next().toggleSlide('fast')
    $(this).find('.arrow i').toggleClass('fa-chevron-down fa-chevron-up')
})

Answer 4

slideToggle() 吧