Question

所以在我的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>

Answer 1

在data-target的{{1}}中传入的ID必须与您要弃用的span.icon-minus-sign的ID相对应。

因为您的所有div.colapse都定位了所有输出的div（因为它们都具有相同的span.icon-minus-sign id），所以它绑定到它找到的第一个元素，这是第一个{{1 }}

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

<强>的Javascript

#rUsers

并修改了html（我删除了数据目标和相应的id，因为我们在脚本中设置了这些内容）

div#rUsers

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

Answer 2

这是你在找什么？

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

我使用siblings()查找带有类的标题的兄弟姐妹.collapse
还使用了slideToggle()，因此您无需检查内容是否可见（自动slideUp和slideDown）

的 jsFiddle

使用jquery手风琴折叠仅在一个部分上工作

2 个答案: