關于多個DIV展開收縮，請教有哪些的不對？點擊無效

如下
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>');

            }
        });
    };
});

請問哪里有問題呢？這樣弄，點擊無效~

回答

編輯回答

菊外人

slideToggle() 吧

2017年7月28日 12:01

編輯回答

真難過

你好 jq的 toggleSlide()是不是被棄用了?如果沒有，可以用這個方法

2018年3月23日 04:09

編輯回答

尋仙

你這樣循環(huán)只會執(zhí)行最后的i,
;這個元素的獲取,你可以使用$(this)來獲取兄弟元素,因為$(this)只會是你當前點擊的這個元素,所以獲取的兄弟元素也是當前點擊的元素的兄弟元素,就不要拼接字符串了

2017年1月20日 18:53

編輯回答

尐潴豬

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

2017年1月2日 21:55