Jquery Mobile Events - 需要面板和可协作集的帮助答案

【问题标题】：Jquery Mobile Events - Need Assistance with Panel and Collabsible SetsJquery Mobile Events - 需要面板和可协作集的帮助
【发布时间】：2013-05-19 19:06:43
【问题描述】：

我有以下代码，我试图找出如何在面板关闭时使用事件来关闭面板中的可折叠集。我在以下链接http://jsfiddle.net/rLjBB/4/ 中包含了 jfFiddle 中的示例，并包含以下代码。我需要一些帮助来了解如何使用 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>

【问题讨论】：

标签： jquery events mobile panels

【解决方案1】：

这解决了你的问题：

$('#leftmenupanel').panel({
    close: function( event, ui ) {
        $('#leftmenupanel div[data-role="collapsible"]').trigger('collapse');
    }
});

我将它添加到更新的小提琴中：http://jsfiddle.net/rLjBB/5/

【讨论】：

太棒了！这样就完成了工作，并让我了解了如何在我需要它们的其他领域在此框架中处理这些事件。