Question

有没有办法像内嵌按钮一样显示可折叠菜单内联

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

是否有人知道如何使两个可折叠按钮显示为内联？

我尝试将data-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>

由于

Answer 1

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

http://jsfiddle.net/phillpafford/h2kcH/11/（工作示例）

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

style="padding-left:5%; width:45%;"

HTML：

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

Answer 2

浮动：左边是你的答案。将它涂在可折叠的外面。这是一个小提琴：

http://jsfiddle.net/den232/LDpGe/

祝你好运！

    .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>

JQUERY MObile - 如何在线显示可折叠菜单？

2 个答案: