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

我正在使用jquerymobile获取动态数据role=“list divider”，并使其可折叠。这可以很好地显示一长串按“状态”划分的“客户”列表

如何添加“全部展开/全部折叠”的切换按钮？ 下面是我的ColdFusion代码&JavaScript代码

我正在使用此JSFIDLE示例创建我的页面：

$（document）.on（“pageinit”，“页面包装器”，函数（）{
$（“#com状态值”）.listview({
自动分频器：正确，
自动分割选择器：功能（li）{
var out=li.attr（“状态”）；
返回；
}
}).listview（“刷新”）；
变量ic=''
$（“.ui-li分隔符”）.prepend（ic）；
$（“.dividerIcon”）.addClass（“divIconPos”）；
});
$（文档）.on（“单击“，”.ui li divider，.dividerIcon'，函数（e）{
var IsCollapsed=true；
var TheDivider=$（此）；
if（$（this）.hasClass（'dividerIcon'））{
divider=$（this.parents（'.ui-li-divider'）；
}
var li=divider.next（':not（.ui li divider）'）；
而（li.length>0）{
IsCollapsed=li.css（'display'）='none'；
li.toggle（）；
li=li.next（':not（.ui-li-divider）'）；
}
如果（！已合并）{
divider.find（'.dividerIcon'）.removeClass（'ui-icon-minus'）.addClass（'ui-icon-plus'）；
}否则{
divider.find（'.dividerIcon'）。removeClass（'ui-icon-plus'）。addClass（'ui-icon-plus'）；
}
e、 停止传播（）；
返回false；
});
.ui li分配器{
左侧填充：28px；
}
.divIconPos{
位置：绝对位置；
显示：内联；
左：3px；
}

未结FFO订单
（#rsCOM.recordcount#）


#rsCOM.status#


#客户地址##cc#,#st##zp#

上次修改：#LmMb#



我想试试这个：


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

HTML

jsfiddle：

更新：

id代码
com状态值

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

});

请在创建代码段时创建一个。这意味着没有CF或其他模板-问题是JS而不是CFAlex，感谢按钮上的帮助。。不幸的是，我不能让我的工作（我添加了代码和按钮，但它没有切换内容？）这是我实际建模的JSFIDLE：（除了我的使用动态数据和除法器值）在你的JSFIDLE上你有
感谢提示和更新。。我检查了&我正在对我的所有元素使用“com状态值”。我一定是遗漏了什么..？更新的答案，检查您是否在两个位置（第1行和第3行）有
com状态值，所有内容都已更新为您的最新。。按“展开/折叠”按钮，它什么也不做？这太疯狂了。。。JSFIDLE和我的代码之间唯一的区别是我的listview部分。。。一定是那里有什么东西？
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();
    }

});

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

});