JQuery 移动端：如何使用按钮更改数据折叠

Question

我正在尝试使用按钮更改 div（数据角色= "collapsible"）的数据折叠。我试图更改其数据崩溃的 div 是：

<div id="page01" class="pages" data-role="collapsible" data-collapsed="true">

我想使用 onclick 更改 div 的数据折叠的按钮是：

<button onclick="$('#page01').collapsible({ collapsed: false });">Collapse/ Expand</button>

我也试过更改我的代码，但我不能:

<button onclick="$('#page01').attrChange('data-collapsed','false')">Collapse/ Expand</button>

或者：

<button onclick="$('#page01').data('collapsed','false')">Collapse/ Expand</button>

或者：

<a><button ...>Collapse/ Expand</button></a>

请帮帮我！

注意：我将其包含在 :

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css">
<script src="js/jquery-1.11.2.min.js"></script>
<script src="js/jquery.mobile-1.4.5.min.js"></script>

Answer 1

您需要设置正确的id。您的 div 有 id="page03" 但您的 JS 正在调用 page01。两个地方需要有相同的id。

Answer 2

正确的调用是：

$('#page01').collapsible('expand');

$('#page01').collapsible('collapse');

Updated FIDDLE

在此处查看 api 文档：http://api.jquerymobile.com/collapsible/#method-collapse

JQuery 移动端：如何使用按钮更改数据折叠

JQuery Mobile: How to change data-collapsed with a button

html

javascript

jquery

jquery-mobile