將div附加到搜索文本框中以創建類似於搜索框的Gmail

Question

我正在創建一個類似於Gmail的搜索框，在該框中單擊該文本框並打開一個新的div，可在其中輸入各個字段的搜索條件。 如何將文本框（'＃searchTextBox）或包含文本框的div與搜索表單（'#gmailSearchBox）的div緊密結合？ 另外我使用引導響應，因此文本框的位置和大小發生變化。所以只需設置div風格顯示：塊和顯示：沒有不工作。 謝謝。

HTML代碼：

<div style="border:1px solid grey; border-radius:3px; max-width:300px; padding-right:0px; padding-left:0px;"class="container-fluid"> 
    <div style="left:0px;right:20px; line-height:inherit; float:left; width:100%; "> 
     <input id="searchTextBox" type="text" style="border:none; width:95%; line-height:inherit; padding:0px 0px 0px 0px;"> 
     <a id="showSearchBox" href="#" style="height:20px"> 
      <span class="caret" style="vertical-align:middle; height:100%"> </span> 
     </a> 
    </input> 
</div> 
</div> 
<input type="button" value="Search" Class="btn btn-primary" /><br> 
Various<br> 
Other<br> 
Information<br> 
Goes <br> 
Here<br> 
<div id='gmailSearchBox' class="gmailSearchBox" style="position:absolute; display:none; border:1px solid grey"> 
<form action="" method="post"> 
    From:<input type="text" id="fromDate"> 
    <br/> 
    To: <input type="text" id="toDate"> 
    <br/> 
    Type:<select id="logType"> 
      <option>--Select Type--</option> 
     </select> 
    <br/> 
    Text:<input type="text" id="searchText"> 
    <br/> 
    <input type="submit" class="btn btn-primary"> 
</form> 
</div> 

JavaScript代碼

$('#showSearchBox').click(showSearchBox); 
function showSearchBox() { 
    $('#gmailSearchBox').css('display','block') 
} 

的jsfiddle鏈接 - http://jsfiddle.net/7FBax/

Answer 1

如果你想用css做這件事，你可能需要稍微改變你的標記。請參閱下面的小提琴，這你想要做什麼：http://jsfiddle.net/97BwC/1/

修訂標記：

<div id="search" style=""class="container-fluid"> 
<div id="searchInputWrapper" style=""> 
    <input type="text" style=""> <a id="showSearchBox" href="#" style="height:20px"> 
      <span class="caret" style="vertical-align:middle; height:100%"> </span> 
     </a> 

    </input> 
</div> 
<div id='gmailSearchBox' class="gmailSearchBox" style=""> 
    <form action="" method="post">From: 
     <input type="text" id="fromDate"> 
     <br/>To: 
     <input type="text" id="toDate"> 
     <br/>Type: 
     <select id="logType"> 
      <option>--Select Type--</option> 
     </select> 
     <br/>Text: 
     <input type="text" id="searchText"> 
     <br/> 
     <input type="submit" class="btn btn-primary"> 
    </form> 
</div> 

的CSS：

#search { 
     position:relative; 
     border:1px solid grey; 
     border-radius:3px; 
     max-width:300px; 
     padding-right:0px; 
     padding-left:0px; 
    } 
    #searchInputWrapper { 
     left:0px; 
     right:20px; 
     line-height:inherit; 
     float:left; 
     width:100%; 
    } 
    #searchInputWrapper input { 
     border:none; 
     width:95%; 
     line-height:inherit; 
     padding:0px 0px 0px 0px; 
    } 
    #gmailSearchBox { 
     position:absolute; 
     bottom:-212px; 
     right:0; 
     display:none; 
     border:1px solid grey; 
     background-color:#fff; 
    } 

更新：

如果搜索框的高度不是靜態的，則可以使用javascript設置底部偏移量。這裏有一個更新的小提琴：http://jsfiddle.net/GPTJ4/2/

下面是修改後的處理程序：

$('#showSearchBox').click(showSearchBox); 

function showSearchBox() { 
    var height = 0, 
     $searchBox = $('#gmailSearchBox'); 

    $searchBox.css({display:'block'}); 

    //get the height of the search box 
    height = $searchBox.height(); 

    //set the offset equal to the height 
    $searchBox.css({bottom:-height +'px'}); 
} 

Answer 2

你有心，如果你把你的#gmailSearchBox中包含同一div它的工作輸入。您可能也希望爲#gmailSearchBox設置背景顏色。