为div添加手风琴功能

时间:2013-10-18 03:02:57

标签: javascript jquery

我无法正确地将手风琴功能应用于我拥有的div。 div是从foreach循环创建的,所以有多个div,每个div都包含一个带内容的div,所以我需要创建并应用唯一的id,这样每个div都可以正确折叠。

查看:

<div class="list_accordion_toggle icon-minus-sign" id="letter" data-bind="text: Letter"></div>
    <div class="hideThis smoke_hover">
        <span class="h2"><small data-bind="text: Name"></small></span>
    </div>

所以当我点击id =“letter”的div时,我希望隐藏class =“hideThis”的div。

包含要隐藏内容的多个div的Javascript。

$(document).on('click', '.list_accordion_toggle', function (event) {
            var togglerArr = [];
            var contentArr = []; 

            $('.icon-minus-sign').each(function () {
                togglerArr.push($(this));
            });

            $('.collapse').each(function () {
                contentArr.push($(this));
            });

            for (var t = 0; t < togglerArr.length; t++) {
                togglerArr[t][0].dataset.target = "#UserList_" + t;
            }

            for (var c = 0; c < contentArr.length; c++) {
                contentArr[c][0].id = "#UserList_" + c;
            }
        })

如何将手风琴功能正确绑定到div?

1 个答案:

答案 0 :(得分:0)

尝试

$(document).on('click', '.list_accordion_toggle', function (event) {
    $(this).toggleClass('icon-minus-sign collapse').next().toggle();
});

演示:Fiddle