把搜索框搜索按鈕的左側點擊按鈕

Question

我有誰擴大搜索框，當按鈕點擊代碼的時候，但我想在按鈕的左側的搜索框，點擊

在這裏我的javascript：

<script type="text/javascript"> 
$(document).ready(function() { 
    $("#displayText").click(function() { 
     $("#toggleText").toggleClass("focused"); 
    }); 
}); 
</script> 

我的jsfiddle寫ü可以修改overthereñ幫我請 https://jsfiddle.net/ehd5n0tx/1/

Answer 1

將表單放在第一個div下方，當點擊搜索圖標時將搜索欄放在左邊。我沒有觸及內聯風格，但我建議將這些樣式移動到您的CSS文件中。

ul.filter { 
display: inline; 
list-style: none; 
} 
ul.filter li { 
text-transform: uppercase; 
margin-left: 40px; 
display: inline; 
} 
#displayText{position:relative; top:-18px; cursor:pointer; float: right;} 
#toggleText { 
-webkit-transition: all .25s ease; 
-moz-transition: all .25s ease; 
transition: all .25s ease; 
visibility: hidden; 
opacity: 0; 
} 
#toggleText.focused { 
visibility: visible; 
opacity: 1; 
display: inline; 
} 

和HTML是：

<div class="kanan-models-2" id="search-dekstop"> 
    <div id="toggleText"> 
     <form style=" 
     display: inline; 
     margin: 0; 
     padding: 0; 
     "> 
     <input type="text" name="" placeholder="search" style=" 
      width: 200px; 
      height: 30px; 
      border-radius: 0; 
      "> 
     </form> 
    </div> 
    <ul class="filter"> 
     <li><a href="#tab1">ALL</a></li> 
     <li><a href="#tab2">FEMALE</a></li> 
     <li><a href="#male">MALE</a></li> 
     <li><img src="https://image.freepik.com/icones-gratuites/sortir-en-plein-ecran_318-9919.jpg" width="20"></li> 
     <li style="margin-right:-30px;"> 
     </li> 
     <li> 
     <a id="displayText"><img src="https://cdn1.iconfinder.com/data/icons/hawcons/32/698627-icon-111-search-128.png" width="20"></a> 
     </li> 
    </ul> 
</div> 

如果展開你的窗口足夠寬

Answer 2

在你的代碼已經放置的搜索框就是你點擊該按鈕之前列表項。這將強制搜索表單顯示在按鈕的左側。

在這裏，看看你的列表項。我已經重新安排它們：

<li> 
    <a id="displayText"><img src="https://cdn1.iconfinder.com/data/icons/hawcons/32/698627-icon-111-search-128.png" width="20"></a> 
</li> 
<li style="margin-right:-30px;"> 
    <div id="toggleText"> 
     <form style=" 
      display: inline; 
      margin: 0; 
      padding: 0; 
     "> 
      <input type="text" name="" placeholder="search" style=" 
       width: 200px; 
       height: 30px; 
       border-radius: 0; 
      "> 
     </form> 
    </div> 
</li> 

https://jsfiddle.net/ehd5n0tx/2/

此外，你應該嘗試從內嵌樣式脫身，並使用一個外部的樣式表。維護和閱讀起來更容易。