當擴展盒搜索

-1

我有簡單的代碼的擴展盒時變奏按鈕點擊這裏的html代碼當擴展盒搜索

<a id="displayText" href="javascript:toggle();"><img src="images/search.png"></a> 
<div id="toggleText" style="display: none;"> 
<form> 
<input type="text" name="" placeholder="search"> 
</form> 
</div>

ñ我的js代碼使光滑：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script language="javascript"> 
function toggle() { 
var ele = document.getElementById("toggleText"); 
var text = document.getElementById("displayText"); 
if(ele.style.display == "block") { 
     ele.style.display = "none"; 

} 
else { 
    ele.style.display = "block"; 

} 
} 
</script>

運作良好，但我想效果流暢當擴展，幫助我感謝

來源

2016-01-14 Wilda Sagita

有沒有jQuery？ – HJerem

你可以給我，無論有沒有jQuery，這對我來說都會好起來的。謝謝 –

我建議你閱讀這個問題的答案（http://stackoverflow.com/questions/13094141/make-div-expand-smoothly）。 – HJerem

我會建議看着CSS轉換，這些都非常順利。而不是顯示none/block，請使用不透明度或最大寬度。

使用最大寬度，將其設置爲0，然後將其設置爲0，然後應用任何寬度，並應用轉換，以便設置它的移動速度，延遲等。這種方式會橫向滑出...

或者你也可以設置不透明度爲0，然後1，它會在褪色。

一個例子，我只是做了在這個eBay商店頭的形式，你可以檢查代碼怎麼看我沒有它，捏它適合..

Dune eBay Store Link

來源

2016-01-14 10:32:24 zombiecode

我只想編輯我的代碼上面的JavaScript，仍然可能或沒有。謝謝:) –

首先設置你的CSS，因爲這（你可以改變過渡的持續時間）：

#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; 
}

然後你HTML改成這樣：

<button id="displayText"><img src="images/search.png"></button> 
<div id="toggleText"> 
    <form> 
     <input type="text" name="" placeholder="search"> 
    </form> 
</div>

然後你的JavaScript改變這一點，添加jQuery庫：

$("#displayText").click(function() { 
    $("#toggleText").toggleClass("focused"); 
});

來源

2016-01-14 10:39:33 HJerem

不能擴大:( –

@WildaSagita你有沒有刪除''顯示：無;''在''＃toggleText'' – HJerem

仍然無法運行:( –

當擴展盒搜索

回答

相關問題