鍍金池/ 問(wèn)答/HTML5  HTML/ 關(guān)于多個(gè)DIV展開(kāi)收縮，請(qǐng)教有哪些的不對(duì)？點(diǎn)擊無(wú)效

關(guān)于多個(gè)DIV展開(kāi)收縮，請(qǐng)教有哪些的不對(duì)？點(diǎn)擊無(wú)效

如下
html:

<div class="welfare_list">
    <ul class="title" id="tab_0">
        <li>
            <dl class="fl">手機(jī)尾號(hào)（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">設(shè)備編號(hào)：<span>21502156456254</span></dl>
            <dl class="fl"></dl>
            <dl class="fr"><a href="" class="button gray">領(lǐng)取</a></dl>
        </li>
    </ul>
</div>
<div class="welfare_list">
    <ul class="title" id="tab_1">
        <li>
            <dl class="fl">手機(jī)尾號(hào)（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">設(shè)備編號(hào)：<span>21502156456254</span></dl>
            <dl class="fl"></dl>
            <dl class="fr"><a href="" class="button gray">領(lǐng)取</a></dl>
        </li>
    </ul>
</div>
<div class="welfare_list">
    <ul class="title" id="tab_2">
        <li>
            <dl class="fl">手機(jī)尾號(hào)（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">設(shè)備編號(hào)：<span>21502156456254</span></dl>
            <dl class="fl"></dl>
            <dl class="fr"><a href="" class="button gray">領(lǐng)取</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>');

            }
        });
    };
});

請(qǐng)問(wèn)哪里有問(wèn)題呢？這樣弄，點(diǎn)擊無(wú)效~

回答
編輯回答
菊外人

slideToggle() 吧

2017年7月28日 12:01
編輯回答
真難過(guò)

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

2018年3月23日 04:09
編輯回答
尋仙

你這樣循環(huán)只會(huì)執(zhí)行最后的i,
clipboard.png;這個(gè)元素的獲取,你可以使用$(this)來(lái) 獲取兄弟元素,因?yàn)?(this)只會(huì)是你當(dāng)前點(diǎn)擊的這個(gè)元素,所以獲取的兄弟元素也是當(dāng)前點(diǎn)擊的元素的兄弟元素,就不要拼接字符串了

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