Question

我有一个脚本来隐藏我的listviews / list-dividers以匹配过滤器，因此在展开时，只有匹配的li显示。

  <script>
    $(function(){
      $('[data-role="list-divider"]').toggle(function(){
        $('.'+$(this).attr('data-link')).addClass('show');
        $(this).children().removeClass('ui-icon-plus').addClass('ui-icon-minus');

      },function(){
        $('.'+$(this).attr('data-link')).removeClass('show');
        $(this).children().removeClass('ui-icon-minus').addClass('ui-icon-plus');
      });
    });
  </script>

用这个css

.hidden{
  display:none;
}
.show{
  display:block;
}
.listIcon{
  float:right
}

然后我有一些展开/折叠所有代码：

    <script>
  $(document).on("click", ".collapseExpand", function () {
    var collapseAll = this.id == "btnCollapse";
    if (collapseAll) {
        $(".ui-li-divider .ui-icon-minus").click();
    } else {
        $(".ui-li-divider .ui-icon-plus").click();
    }
});
    </script>

用它来触发它

        <div class="ui-grid-a ui-mini">
  <div class="ui-block-a"><a id="btnExpand" class="ui-btn ui-corner-all collapseExpand">Expand All</a></div>
  <div class="ui-block-b"><a id="btnCollapse" class="ui-btn ui-corner-all collapseExpand">Collapse All</a></div>
</div>

然后html就是这样：

    <li data-role="list-divider" data-link="Crabclan">Crab Clan<span class="fiveringsdb"><span class="icon-clan-crab"></span></span></li>

    <li class="hidden Crabclan" data-filtertext="p.core:l5r01031:Character:d.Dynasty:c.Crab:Borderlands Defender:t.Bushi"><a><div><img src="img/l5r01031.jpg" class="cardimg"></div></a></li>
    <li class="hidden Crabclan" data-filtertext="p.core:l5r01025:Character:d.Dynasty:c.Crab:Eager Scout:t.Bushi:t.Scout"><a><div><img src="img/l5r01025.jpg" class="cardimg"></div></a></li>

...

    <li data-role="list-divider" data-link="Craneclan">Crane Clan<span class="fiveringsdb"><span class="icon-clan-crane"></span></span></li>

    <li class="hidden Craneclan" data-filtertext="p.core:l5r01040:Character:d.Dynasty:c.Crane:Asahina Artisan:t.Shugenja:t.Air"><a><div><img src="img/l5r01040.jpg" class="cardimg"></div></a></li>
    <li class="hidden Craneclan" data-filtertext="p.core:l5r01050:Character:d.Dynasty:c.Crane:Asahina Storyteller:t.Courtier:t.Shugenja:t.Air:k.Sincerity"><a><div><img src="img/l5r01050.jpg" class="cardimg"></div></a></li>
    <li class="hidden Craneclan" data-filtertext="p.core:l5r01042:Character:d.Dynasty:c.Crane:Brash Samurai:t.Bushi"><a><div><img src="img/l5r01042.jpg" class="cardimg"></div></a></li>

问题是，只有在我手动扩展了列表分隔符后，才会展开所有功能。如果我在第一次加载时尝试它，它什么都不做。但是手动打开一些分隔线，再次关闭它们，它会很乐意打开并在每次点击时关闭它们。

我错过了什么？

“展开/折叠所有”工作，但只有在项目手动展开一次后才能工作

0 个答案: