Question

我试图在使用jquery ui mobile的网页上放置一个按钮来构建可折叠列表以展开/折叠所有列表。但是，我对jquery和javascript编码相当新，所以我遇到了一些问题。我已将按钮放入，但点击它时代码没有响应。我将如何纠正此代码，以便成功扩展/折叠？

按钮的代码在这里：

<script type="text/javascript" src="js/jquery-1.11.2.min.js">

$('#collapsible1').click("click", showHide);

var collapsible = $('.collapsible');
collapsible.hide();

function showHide() {
    if(collapsible.is(':hidden'))
        collapsible.slideDown();
    else
        collapsible.slideUp();
}

</script>

按钮初始化为：

<button id="collapsible1">Show/Hide</button>

我正在测试的模板位于：http://jsfiddle.net/TLittler/9ndzm3cc/5/

Answer 1

可折叠小部件具有展开和折叠方法：

http://api.jquerymobile.com/collapsible/#method-expand

所以你可以扩展所有可折叠的东西：

$('[data-role="collapsible"]').collapsible( "expand" );

然后像这样崩溃：

$('[data-role="collapsible"]').collapsible( "collapse" );

更新了 FIDDLE

展开/折叠jQuery ui mobile中的所有列表元素

1 个答案: