Question

我正在使用jQuery Mobile来获取动态data-role =“list-divider”并使其可折叠。这可以很好地显示一长串“客户”除以“状态”

如何添加“全部扩展/全部折叠”的切换按钮？以下是我的ColdFusion代码＆amp; JavaScript代码。

我正在使用此jsfiddle示例来创建我的页面：http://jsfiddle.net/ezanker/5PnBT/50/

$(document).on("pageinit", "#page-wrapper", function() {
  $("#com-status-value").listview({
    autodividers: true,
    autodividersSelector: function(li) {
      var out = li.attr('status');
      return out;
    }
  }).listview('refresh');

  var ic = '<div class="ui-icon ui-icon-minus dividerIcon">&nbsp;</div>'
  $(".ui-li-divider").prepend(ic);
  $(".dividerIcon").addClass("divIconPos");
});

$(document).on("click", '.ui-li-divider, .dividerIcon', function(e) {
  var IsCollapsed = true;
  var TheDivider = $(this);
  if ($(this).hasClass('dividerIcon')) {
    TheDivider = $(this).parents('.ui-li-divider');
  }

  var li = TheDivider.next(':not(.ui-li-divider)');
  while (li.length > 0) {
    IsCollapsed = li.css('display') == 'none';
    li.toggle();
    li = li.next(':not(.ui-li-divider)');
  }

  if (!IsCollapsed) {
    TheDivider.find('.dividerIcon').removeClass('ui-icon-minus').addClass('ui-icon-plus');
  } else {
    TheDivider.find('.dividerIcon').removeClass('ui-icon-plus').addClass('ui-icon-minus');
  }
  e.stopPropagation();
  return false;
});

.ui-li-divider {
  padding-left: 28px;
}

.divIconPos {
  position: absolute;
  display: inline;
  left: 3px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div data-role="page" data-add-back-btn="false" id="page-wrapper">
  <div data-role="header">
    <h1>Open FFO Orders
      <cfoutput>(#rsCOM.recordcount#)</cfoutput>
    </h1>
    <a href="" class="ui-btn-right" data-icon="home" data-iconpos="notext" data-direction="reverse">Expand</a>

  </div>
  <div data-role="content" data-filter="true">
    <ul id="com-status-value" data-inset="false" data-role="listview" data-filter="true">
      <cfoutput query="rsCOM" group="status">
        <li data-role="list-divider" data-filter="true">
          &nbsp;&nbsp;#rsCOM.status#
        </li>
        <cfoutput>
          <li>
            <p>#custAddress# #cc#, #st# #zp#</p>
            <p>Last Modified: #LmMb# </p>
          </li>
        </cfoutput>
      </cfoutput>
    </ul>
  </div>
</div>

Answer 1

我会试试这个：

添加一个按钮Expands All/Collapses All可能是一个有意义的图标
为按钮添加事件侦听器
点击（点击）检查是否有任何项目折叠，如果是，则展开全部，如果否则折叠全部

HTML 的

<input type="button" id="expand-collapse" value="Expands All/Collapses All" />

的JavaScript

var $listItems = $('#hp-latest-articles li:not(.ui-li-divider)');

$('#expand-collapse').on("click", function () {

    if ($('#hp-latest-articles li:not(.ui-li-divider):hidden').length) {
        $listItems.show();
    } else {
        $listItems.hide();
    }

});

的jsfiddle： http://jsfiddle.net/Lrhebm2z/

<强> 更新

代码com-status-value

var $listItems = $('#com-status-value li:not(.ui-li-divider)');

$('#expand-collapse').on("click", function () {

    if ($('#com-status-value li:not(.ui-li-divider):hidden').length) {
        $listItems.show();
    } else {
        $listItems.hide();
    }

});

jquery Mobile - 添加选项以展开/折叠

1 个答案: