关于多个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(){&nbsp; &nbsp; $(this).next().toggleSlide('fast')&nbsp; &nbsp; $(this).find('.arrow i').toggleClass('fa-chevron-down fa-chevron-up')})

Answer 4

slideToggle() 吧