javascript - 不使用可折叠标题的可折叠搜索按钮

Question

使用 JQM，我正在尝试实现以下 header 设计

---

|[首页] 公司------------------------------[搜索][筛选]

---

[元素列表]

主页按钮和公司标题左对齐，搜索和过滤器右对齐。

当用户点击搜索图标时，我希望以下搜索栏出现在标题和元素列表之间

        <div data-role="fieldcontain">
            <label for="search">Search Input:</label>
            <input id="search-tickets"  type="search" name="search-mini" id="search-mini" data-mini="true" />
            </div>  

JQM 文档指导我使用可折叠标题。虽然这很好，但如果标记为可折叠，则很难在同一个标​​题中容纳其他图标，例如主页、公司文本和过滤器。

我可以使用可折叠标题的替代方法并在标题上保持现状吗？

Answer 1

最棘手的部分是标题按钮/文本对齐(请在所有浏览器中测试我的解决方案)。对于搜索栏，我只会在点击搜索按钮时隐藏/显示主要元素。

代码-:

$(document).on("click", "#search-button", function(event)
{
	$("#searchtickets").toggle();
});

.company
{
display: table-cell;
padding-left: 3em;
}
.spacerright
{
    margin-right: 50px !important;
}

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

<div data-role="page">
	<div data-role="header">
		<h1 class="company">Company</h1>
		<a class="ui-btn-left" data-iconpos="notext" href="#panel" data-role="button" data-icon="home"></a>
		<a class="ui-btn-right spacerright" href="#page-new-ticket" id="search-button" data-role="button" data-icon="search" data-iconpos="notext" data-inline="true"></a>                         
		<a class="ui-btn-right" href="#page-new-ticket" id="btn-new-ticket" data-role="button" data-icon="plus" data-iconpos="notext" data-inline="true"></a> 
    </div>
    <div data-role="content">
        <div data-role="fieldcontain" id="searchtickets" style="display:none;padding-bottom:1em;">
            <label for="search">Search Input:</label>
            <input id="search-tickets"  type="search" name="search-mini" id="search-mini" data-mini="true" />
        </div>
		
		<ul data-role="listview">
			<li>List item 1</li>
			<li>List item 2</li>
			<li>List item 3</li>
		</ul>
    </div>
</div>