Jquery mobile JQUERY MObile-如何内联显示可折叠菜单？

有没有一种方法可以像内嵌按钮一样内嵌显示可折叠菜单

<div data-role="collapsible" data-collapsed="true" data-inline="true">

    <h3>Sorting Options</h3>
    <div data-role="controlgroup" >
        <input type="radio"  data-theme="c" name="radio-choice-1" id="datePosted" value="1" onchange='_search.sort("datePosted")'/>
        <label for="datePosted">Added</label>
</div>
</div>
<div data-role="collapsible" data-collapsed="true" data-inline="true">

    <h3 >Search Options</h3>
    <div data-role="controlgroup" >
        <input type="radio"  data-theme="c" name="radio-choice-1" id="datePosted" value="1" onchange='_search.sort("datePosted")'/>
        <label for="datePosted">Added</label>
</div>
</div>

排序选项
补充
搜索选项
补充

有人知道如何让两个可折叠的按钮彼此并排显示吗

我尝试将数据inline=“true”放在不同的位置，但没有任何效果

我的变通解决方案 我最终这样做，使按钮显示为内联，但菜单将显示在两个按钮下面。当你点击按钮时，按钮没有+/-变化，但这并没有菜单显示在正确的位置那么重要

    $("#showfilteroptions").live('click',function(event) {
                $("#searchoptions").hide(); 
                $("#filteroptions").toggle();       
        });
        $("#showsearchoptions").live('click',function(event) {
                $("#filteroptions").hide();
                $("#searchoptions").toggle();       
        });


    <div data-role="controlgroup" data-type="horizontal" style="text-align: center">
        <a href="#" data-role="button" data-icon="plus" data-theme="b" id="showfilteroptions" >Filter</a>
        <a href="#" data-role="button" data-icon="plus" data-theme="b" id="showsearchoptions" >Categories</a>
    </div>

    <div data-role="fieldcontain" id="filteroptions" style="display:none;">
        <fieldset data-role="controlgroup" >
            <input type="radio"  data-theme="c" name="radio-choice-1" id="datePosted" value="1" onchange='_search.sort("datePosted")' />
            <label for="datePosted">Added</label>                   
            <input type="radio" data-theme="c" name="radio-choice-1" id="size" value="1" onchange='_search.sort("size")' />
            <label for="size">Size</label>                  
    </fieldset>
   </div>
   <div data-role="fieldcontain" id="searchoptions" style="display:none;">
    <fieldset data-role="controlgroup" >
        <input type="radio"  data-theme="c" name="radio-choice-1" id="all" value="1" onchange='_search.searchCategory(-1)'/>
        <label for="all">All</label>
        <input type="radio"  data-theme="c" name="radio-choice-1" id="oldshows" value="1" onchange='_search.searchCategory(5)'/>
        <label for="oldshows">Old Shows</label>
        <input type="radio"  data-theme="c" name="radio-choice-1" id="newShows" value="1" onchange='_search.searchCategory(7)'/>
        <label for="newshows">New Shows</label>     
    </fieldset>
    </div>

$（“#showfilteroptions”）.live（'click'，函数（事件）{
$（“#搜索选项”）.hide（）；
$（“#过滤器选项”）.toggle（）；
});
$（“#showsearchoptions”）.live（'单击'，函数（事件）{
$（“#过滤器选项”）.hide（）；
$（“#搜索选项”）.toggle（）；
});
补充
大小
全部的
旧剧
新节目

---

谢谢

您可以使用带有自定义样式的网格布局：

• （工作示例）

内联CSS（需要使用它才能获得所需的外观）：

HTML:

排序选项
补充
搜索选项
补充

浮动：左边是你的答案。将其应用于可折叠的外部。这是一把小提琴：

祝你好运

    .floatleft {
    float:left;
 }
.floatright {
    float:right;
 }
.forceinline{  /* Prevent fieldcontain from doing a BLOCK thing */
    display:inline !important;
}
.textwidth {  /* limit width of input fields */
    width:80px;
}
.closespacing { /* controls spacing between elements */
    margin:0px 5px 0px 0px;
 }
.bigselect {   /* centers select with big buttons */
    padding: 0px;
    margin:2px 5px 0px 0px;
 }
.biginputheight {   /* matches text input height to big buttons */
    padding-top:10px !important;
    padding-bottom:12px !important;
}
.miniinputheight { /* matches text input height to minibuttons */
    padding-top:5px !important;
    padding-bottom:5px !important;
}
    <div data-role="page" class="type-home">
<div data-role="content">

<ul data-role="listview">
<li  data-role="fieldcontain">first LI line</li>
<li  data-role="fieldcontain">

<div  class='floatleft closespacing'>

<div data-role="collapsible" data-collapsed="true" data-inline="true" class='floatleft closespacing'>

<h3>Sorting Options</h3>
<div data-role="controlgroup" >
<input type="radio"  data-theme="c" name="radio-choice-1" id="datePosted" value="1" onchange='_search.sort("datePosted")'/>
<label for="datePosted">Added</label>
</div>
</div>
<div data-role="collapsible" data-collapsed="true" data-inline="true" class='floatleft closespacing'>

<h3 >Search Options</h3>
<div data-role="controlgroup" >
<input type="radio"  data-theme="c" name="radio-choice-1" id="datePosted" value="1" onchange='_search.sort("datePosted")'/>
<label for="datePosted">Added</label>
</div>
</div></div>

</li>
<li  data-role="fieldcontain">last LI line</li>

</ul><!-- /listview -->  

</div>
</div>

.floatleft{
浮动：左；
}
.对{
浮动：对；
}
.forceinline{/*阻止fieldcontain执行块操作*/
显示：内联！重要；
}
.textwidth{/*限制输入字段的宽度*/
宽度：80px；
}
.closespacing{/*控制元素之间的间距*/
保证金：0px 5px 0px 0px；
}
.bigselect{/*使用大按钮进行选择*/
填充：0px；
保证金：2px 5px 0px 0px；
}
.biginputheight{/*将文本输入高度与大按钮匹配*/
填充顶部：10px！重要；
填充底部：12px！重要；
}
.miniinputheight{/*将文本输入高度与迷你按钮匹配*/
填充顶部：5px！重要；
填充底部：5px！重要；
}

第一行li

排序选项
补充
搜索选项
补充

最后一行li

是否要同时显示

+

和

-

图标？或者你想让两个可折叠区域显示为内联？我想让可折叠按钮彼此相邻，但实际菜单显示在两个按钮下方。我最终从可折叠菜单改为常规按钮来切换菜单。菜单是默认显示：无。感谢您的代码示例。使用网格的一个问题是，它在移动设备上看起来不正常。折叠的菜单显示在彼此旁边，移动屏幕上没有多少空间来并排显示菜单。我想我只需要加入常规的内联按钮并切换菜单。再次感谢

<div data-role="page" id="home"> 
    <div data-role="content"> 
        <div class="ui-grid-a">
            <div class="ui-block-a" style="padding-left:5%; width:45%;">
                <div data-role="collapsible" data-collapsed="true" data-inline="true">

                    <h3>Sorting Options</h3>
                    <div data-role="controlgroup" >
                        <input type="radio"  data-theme="c" name="radio-choice-1" id="datePosted" value="1" onchange='_search.sort("datePosted")'/>
                        <label for="datePosted">Added</label>
                    </div>
                </div>
            </div>
            <div class="ui-block-b" style="padding-left:5%; width:45%;">
                <div data-role="collapsible" data-collapsed="true" data-inline="true">

                    <h3 >Search Options</h3>
                    <div data-role="controlgroup" >
                        <input type="radio"  data-theme="c" name="radio-choice-2" id="datePosted2" value="1" onchange='_search.sort("datePosted")'/>
                        <label for="datePosted2">Added</label>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

    .floatleft {
    float:left;
 }
.floatright {
    float:right;
 }
.forceinline{  /* Prevent fieldcontain from doing a BLOCK thing */
    display:inline !important;
}
.textwidth {  /* limit width of input fields */
    width:80px;
}
.closespacing { /* controls spacing between elements */
    margin:0px 5px 0px 0px;
 }
.bigselect {   /* centers select with big buttons */
    padding: 0px;
    margin:2px 5px 0px 0px;
 }
.biginputheight {   /* matches text input height to big buttons */
    padding-top:10px !important;
    padding-bottom:12px !important;
}
.miniinputheight { /* matches text input height to minibuttons */
    padding-top:5px !important;
    padding-bottom:5px !important;
}
    <div data-role="page" class="type-home">
<div data-role="content">

<ul data-role="listview">
<li  data-role="fieldcontain">first LI line</li>
<li  data-role="fieldcontain">

<div  class='floatleft closespacing'>

<div data-role="collapsible" data-collapsed="true" data-inline="true" class='floatleft closespacing'>

<h3>Sorting Options</h3>
<div data-role="controlgroup" >
<input type="radio"  data-theme="c" name="radio-choice-1" id="datePosted" value="1" onchange='_search.sort("datePosted")'/>
<label for="datePosted">Added</label>
</div>
</div>
<div data-role="collapsible" data-collapsed="true" data-inline="true" class='floatleft closespacing'>

<h3 >Search Options</h3>
<div data-role="controlgroup" >
<input type="radio"  data-theme="c" name="radio-choice-1" id="datePosted" value="1" onchange='_search.sort("datePosted")'/>
<label for="datePosted">Added</label>
</div>
</div></div>

</li>
<li  data-role="fieldcontain">last LI line</li>

</ul><!-- /listview -->  

</div>
</div>