3機能1入力

Question

"ボタン"（入力）を押すと、検索ボックスを開いて閉じる必要がありました。問題は、私が2回クリックしなければならない検索ボックスを閉じたいとき、同じスポット（x、y軸はexaclyと同じでなければならず、関数が結果を提出しなければならないということです）です。

function slideOpen(elopen){ 
 
    var elem = document.getElementById(elopen); 
 
    elem.style.transition = "width 1.4s ease-in-out" 
 
    elem.style.width = "250px"; 
 
    elem.style.height = "50px"; 
 
} 
 
    
 
function slideClosed(elclose){ 
 
    var elem = document.getElementById(elclose) 
 
    elem.style.transition = "width 1.4s ease-in-out" 
 
    elem.style.width = "0px"; 
 
    elem.style.height = "50px"; 
 
    elem.style.border = "0"; 
 
    elem.style.padding = "10px 25px 10px 25px"; 
 
    
 
} 
 
    
 
function searchbutton(){ 
 
    var typetext = document.getElementById("typetext"); 
 
    var typetextWidth = document.getElementById("typetext").getAttribute("width"); 
 
    var onClick = document.getElementById("searchtext").onclick; 
 
    if(typetextWidth === "0"){ 
 
    onClick = slideOpen('typetext'); 
 
    
 
    } else { 
 
    onClick = slideClosed('typetext'); 
 
    } 
 
      
 
}

<form> 
 
     <input id="typetext" type="text" name="search" placeholder="Patience is a virtue" /> 
 
    <input id="searchtext" type="image" src="search.png" onclick="searchbutton()" /> 
 
     
 
    </form>

Answer 1

あなたは、私はこれが良いと思いグローバル変数に問題がない場合：

... 
var searchIsShown = false; 

function searchbutton(){ 

    if(searchIsShown) 
    { 
     searchIsShown = false; 
     slideOpen('typetext'); 
    } else { 
     searchIsShown = true; 
     slideClosed('typetext'); 
    } 

} 

プラス、あなたはCSSにあなたのheightとtransitionを移動する必要があります