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 をターゲットにしているため (それらはすべて同じ ID を持っているため) #rUsers、最初に見つかった要素にバインドされ、それが最初の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（スクリプトで設定しているため、データターゲットと対応する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();   
})

クラス .collapse でヘッダーの兄弟を見つけるためにsiblings()を使用しました
また、 slideToggle()を使用したため、コンテンツが表示されているかどうかを確認する必要はありません (自動的に slideUp と slideDown)

jsFiddle

于 2013-10-11T14:31:37.690 に答える