3

因此，在我的 div 中，我有一个数据绑定，它将显示多个包含内容的标题。我想使用 jQuery 来折叠和展开，但是无论我点击什么标题，我目前拥有的只是折叠和展开第一个标题。

我怎样才能改变我拥有的东西，以便它可以折叠和展开任何点击的标题，而不仅仅是第一个？

   <div class="accordion-group elements-by-unit" style="display:none" id="listView"  data-bind="foreach: Types">
            <div class="text_x-large header">
                <span  data-bind="text:Name()"></span> 
                <span class="userCount">(<span data-bind="text:UserCount()"></span>)</span>
                <span class="icon-minus-sign" data-toggle="collapse"></span>
            </div>
            <div class="collapse in" data-bind="template: { name: 'list', foreach: $data.Users }"></div>
        </div>

<script type="text/html" id="list">
    <h3 id="letter" data-bind="text: Letter"></h3>
    <div class="smoke_hover">
        <span class="h2"><small data-bind="text: Name"></small></span>
    </div>
</script>

Javascript

<script type="text/javascript">
        (function ($) {
            Views.User.Init({
                url: '@url',
                id:@ViewBag.SectionID,
                roleUser:@ViewBag.UserSettings
                });

            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 = "#rUsers-" + t;
            }

            for (var c = 0; c < contentArr.length; c++) {
                contentArr[c][0].id = "#rUsers-" + c;
            }
        })(jQuery);
    </script>
4

2 回答 2

1

data-target您传入的 ID 必须与您要折叠span.icon-minus-sign的 ID 对应 。div.colapse

因为您所有span.icon-minus-sign的目标都是输出的所有 div（因为它们都具有相同的#rUsersid），所以它绑定到它找到的第一个元素，即第一个div#rUsers.

为了解决这个问题，动态添加 ID，递增数字将是最好的，并将其添加到 data-target 和 id。在您的情况下，我看到的唯一解决方案是：

Javascript

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 = "#rUsers-" + t;
}

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

并修改了 html（我删除了 data-target 和 coresponding id，因为我们在脚本中设置了它们）

<div class="accordion-group elements-by-unit" id="listView" data-bind="foreach: Types">
<div class="text_x-large header">
    <span  data-bind="text:Name()"></span>
    <span class="userCount">(<span data-bind="text:UserCount()"></span>)</span>
    <span class="icon-minus-sign" data-toggle="collapse"></span>
</div>
<div class="collapse in" data-bind="template: { name: 'list', foreach: $data.Users }"></div>

请让我知道它是否适合您！还要确保以正确的顺序调用所有 .js 文件。

于 2013-10-11T16:34:57.000 回答
0

这是你想要的？

$('.header').click(function()
{
    $(this).siblings('.collapse').slideToggle();   
})

我使用了siblings()来查找带有类.collapse 的标题的兄弟姐妹
也使用了slideToggle()所以你不必检查内容是否可见（自动slideUp 和slideDown）

jsFiddle

于 2013-10-11T14:31:37.690 回答