jQuery Mobile - 可折叠列表作为标题栏项

Question

我正在尝试在标题栏中输入“选项”。我已成功将其添加到标题中。但问题是，它处于“扩展”状态，并在崩溃状态下恢复正常。

以下是问题的解答：http://jsfiddle.net/vNTR5/

我尝试过几件事：

1. 我注意到处于崩溃状态的“ui-collapsible-heading ui-collapsible-heading-collapsed”类与扩展状态下的“ui-collapsible-heading”类相比。我捕获了这些事件，并尝试添加“ui-collapsible-heading-collapse”类。它导致列表在扩展后永久“扩展”。
2. 我尝试制作自定义css类，并添加和删除它们。但它根本不会通过类添加margin-left。它在内联时需要它。

请帮忙。

代码段：

HTML：

<div data-role="header"> 

                  <h1>Main Menu</h1>

                  <div data-role="collapsible" id="optionsMenu" data-mini="true" class="rightMenu" data-collapsed-icon="gear" data-expanded-icon="gear">
                    <h3 style="margin-left:-20%;">Options</h3>
                      <ul data-role="listview">
                        <li data-icon="false"><a href="#">Settings</a></li>
                        <li data-icon="false"><a href="#">Logout</a></li>                        
                      </ul>
                  </div>

             </div>

CSS：

.rightMenu{
    position: absolute;
    top:-10%;   
    right:2%;
}

Answer 1

工作示例：http://jsfiddle.net/Gajotres/FSSzK/

.rightMenu {
    position: absolute;
    top:-10%;   
    right:2%;
    width: 100px !important;
}

.rightMenu .ui-collapsible-content .ui-listview {
    margin: -10px -15px -10px -35px !important;
}