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。内联时需要它。

请帮忙。

代码sn-p：

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;
}