我有以下代码,我试图找出如何在面板关闭时使用事件关闭面板中的可折叠集。我在jfFiddle中包含了一个示例,其中包含以下链接http://jsfiddle.net/rLjBB/4/以及下面的代码。我需要一些帮助来理解如何使用jQuery Mobile框架来处理事件的使用。我是这个图书馆的开始,所以任何帮助都会受到赞赏。
<body>
<div data-role="page" id="MuseMain">
<div data-role="panel" id="leftmenupanel">
<div data-role="collapsible-set" data-collapsed="true">
<div data-role="collapsible" data-theme="b" data-content-theme="d" >
<h3>Overview</h3>
<p>The overview provides what is normally seen on a book cover; the name, author and description of the story.</p>
<a href="" data-role="button" data-mini="true" data-icon="edit" data-inline="true" data-theme="a">Edit</a>
</div>
<div data-role="collapsible" data-theme="b" data-content-theme="d" >
<h3>Chapters & Scenes</h3>
<p>The chapters are where the details of the chapters are defined and the actual storyline scenes are created..</p>
<a href="" data-role="button" data-mini="true" data-icon="edit" data-inline="true" data-theme="a">Edit</a>
</div>
<div data-role="collapsible" data-theme="b" data-content-theme="d" >
<h3>Characters</h3>
<p>The characters area is very detailed and allows the attributes to be defined, a detailed description, personality type, and relationships.</p>
<a href="" data-role="button" data-mini="true" data-icon="edit" data-inline="true" data-theme="a">Edit</a>
</div>
</div>
</div><!-- /panel -->
<div data-role="header">
<a href="#leftmenupanel" id="changeIconValue" data-role="button" data-icon="bars" data-theme="b" data-inline="true">Menu</a>
<h1>Muse - A Writer's Assistant</h1>
</div>
<div data-role="content">
<h2>Page content</h2>
<p>Page content goes here.</p>
</div>
<div data-role="footer">
<h1>Design By IntelligentDesigns</h1>
</div>
</body>
答案 0 :(得分:0)
这解决了您的问题:
$('#leftmenupanel').panel({
close: function( event, ui ) {
$('#leftmenupanel div[data-role="collapsible"]').trigger('collapse');
}
});
我将其添加到更新的小提琴中:http://jsfiddle.net/rLjBB/5/