Javascript 使用jquery accordion collapse只处理一个部分

因此，在我的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>

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;
}

（函数（$）{
Views.User.Init({
url:“@url”，
id:@ViewBag.SectionID，
roleUser:@ViewBag.UserSettings
});
var-togglerArr=[]；
var contentArr=[]；
$（'.icon减号'）。每个（函数（）{
切换rarr.push（$（this））；
});
$（'.collapse'）。每个（函数（）{
contentArr.push（$（this））；
});
for（var t=0；t

这就是你要找的吗

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

我过去常常找到带有class.collapse的标题的同级。也使用了collapse
，这样您就不必检查内容是否可见（自动滑动并向下滑动）

---

传递给

span的
数据目标的ID。图标减号
必须与要折叠的
div.colapse
的ID相对应

因为所有的
span.图标减号
都指向所有输出的div（因为所有div都具有相同的
#rUsers
id），所以它绑定到它找到的第一个元素，即第一个
div#rUsers

要解决这一问题，最好动态添加id（数字递增），并将其添加到数据目标和id中。在您的情况下，我看到的唯一解决方案是：

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>

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;
}

var-togglerArr=[]；
var contentArr=[]；
$（“.icon减号”）.each（函数（）{
切换rarr.push（$（this））；
});
$（“.collapse”）.each（函数（）{
contentArr.push（$（this））；
});
for（var t=0；t

和修改的html（我删除了数据目标和响应id，因为我们正在脚本中设置它们）


()


请让我知道它是否适合你！还要确保按正确的顺序调用所有.js文件。
您只有一个id为
#rUsers
的div。是否在输出的html中重复使用
.header
和
#rUsers
的div？如果是,，您必须为
#rUsers
创建唯一的ID，并将其作为数据添加到相应的标题中-target@BojanaSekeljic是的，它们在我的输出中重复出现，每当我单击标题时，它只在第一个菜单上运行，忽略其他菜单。检查我编辑的评论above@BojanaSekeljic既然我有了唯一的ID，如何创建它们在foreach循环中？你能发布循环代码吗？这是我已经做过的。单击时所有标题仅折叠或展开第一个标题检查我的更新。即使在页眉和折叠之间有一个div，它仍然会折叠。正如您在JSFIDLE中看到的那样，它可以在多个标题上工作。我正在尝试这一点，但我注意到在javascript中有
#rUsers
，但在html中没有它的id-这就是它应该的样子吗？是的，javascript代码正在查找所有带有类
.collapse
的div，ads id将id增加到它。如果您在网站上的其他位置使用可折叠项，您可能需要在此处添加更具体的选择器，即使用特定id将整个内容放入div中，然后使用
$（“#specific.icon减号”）将其定位到javascipt中
我用javascript更新了上面的帖子，但我仍然无法使任何标题折叠或展开，也不确定为什么可以发布html输出？好的，但是您可以发布浏览器中呈现的内容吗？标题和内容div是否接收到正确的id？另一个问题可能是bootstrap.js在视图之前加载，在这种情况下，您可能需要将bootstrap.js作为依赖项注入