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

Question

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

---

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

---

[项目列表]

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

当用户点击搜索图标时，我希望下面的搜索栏出现在标题和项目列表之间

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

Answer 2

我认为你不需要任何 JS 或 css 库，你可以只用几行纯 CSS 代码 (like this tutorial) -

body {
	background: #fff;
	color: #666;
	font: 85%/140% Arial, Helvetica, sans-serif;
	width: 800px;
	max-width: 96%;
	margin: 0 auto;
}
a {
	color: #69C;
	text-decoration: none;
}
a:hover {
	color: #F60;
}
h1 {
	font: 1.7em;
	line-height: 110%;
	color: #000;
}
p {
	margin: 0 0 20px;
}

/* reset webkit search input browser style */
input {
	outline: none;
}
input[type=search] {
	-webkit-appearance: textfield;
	-webkit-box-sizing: content-box;
	font-family: inherit;
	font-size: 100%;
}
input::-webkit-search-decoration,
input::-webkit-search-cancel-button {
	display: none; /* remove the search and cancel icon */
}

/* search input field */
input[type=search] {
	background: #ededed url(http://webdesignerwall.com/demo/expandable-search-form/images/search-icon.png) no-repeat 9px center;
	border: solid 1px #ccc;
	padding: 9px 10px 9px 32px;
	width: 55px;
	
	-webkit-border-radius: 10em;
	-moz-border-radius: 10em;
	border-radius: 10em;
	
	-webkit-transition: all .5s;
	-moz-transition: all .5s;
	transition: all .5s;
}
input[type=search]:focus {
	width: 130px;
	background-color: #fff;
	border-color: #6dcff6;
	
	-webkit-box-shadow: 0 0 5px rgba(109,207,246,.5);
	-moz-box-shadow: 0 0 5px rgba(109,207,246,.5);
	box-shadow: 0 0 5px rgba(109,207,246,.5);
}

/* placeholder */
input:-moz-placeholder {
	color: #999;
}
input::-webkit-input-placeholder {
	color: #999;
}

/* demo B */
#demo-b input[type=search] {
	width: 15px;
	padding-left: 10px;
	color: transparent;
	cursor: pointer;
}
#demo-b input[type=search]:hover {
	background-color: #fff;
}
#demo-b input[type=search]:focus {
	width: 130px;
	padding-left: 32px;
	color: #000;
	background-color: #fff;
	cursor: auto;
}
#demo-b input:-moz-placeholder {
	color: transparent;
}
#demo-b input::-webkit-input-placeholder {
	color: transparent;
}

<h3>Try this</h3><br/>
<form>
	<input type="search" placeholder="Search">
</form>

<h3>Or this</h3>
<form id="demo-b">
	<input type="search" placeholder="Search">
</form>

你也可以通过这种方式使用一个小的JS-

$(function() {
  $('.srch-button').click(function(){
    var $wrapper = $('.srch-wrapper'), 
        isOpen = $wrapper.hasClass('open');
    $wrapper.toggleClass('open')
      .find('.srch-input')[isOpen ? 'blur' : 'focus']();
    // remove this - onyl for demo
    return false;
  });
  
})

body {
  padding: 10px 20px;
  background-color: #343434;
  color: #fff;
}

.center {
  padding: 60px;
  max-width: 400px;
  margin-left: 200px;
}

.srch-form {
  position: relative;
  width: 44px;
}

.srch-wrapper {
  position: absolute;
  top: 0;
  right: 0;
  width: 44px;
  height: 40px;
  -moz-transition: all 0.3s linear;
  -o-transition: all 0.3s linear;
  -webkit-transition: all 0.3s linear;
  transition: all 0.3s linear;
}
.srch-wrapper.open {
  width: 200px;
}

.srch-input {
  position: relative;
  background-color: transparent;
  height: 44px;
  line-height: 26px;
  padding: 5px 10px 5px 32px;
  box-sizing: border-box;
  border: 2px solid #ddd;
  border-radius: 100px;
  margin: 0;
  width: 100%;
}
.srch-input:focus {
  outline: none;
  border-color: #aaa;
}

.srch-button {
  position: absolute;
  top: 0;
  left: 0;
  border: 0;
  padding: 0;
  margin: 0;
  background-color: transparent;
  color: #ddd;
  width: 44px;
  height: 44px;
  text-align: center;
}
.srch-button:focus {
  outline: none;
}

.srch-input:focus + .srch-button,
.srch-button:hover {
  color: #aaa;
}

<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/zepto/1.0/zepto.min.js"></script>

<div class="center">
  <form action="" class="srch-form">
    <div class="srch-wrapper open">
      <input type="text" class="srch-input" placeholder="Search..." />
      <button class="srch-button" type="submit">
      <em class="icon-search"></em>
    </button>
    </div>
  </form>
</div>