关于多个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() 吧