如何擴展搜索欄並同時隱藏其他元素？

我正在嘗試在一行中創建一個搜索欄以及一個頁眉。當我專注於搜索欄時，我希望它展開全寬並隱藏標題。我可以展開搜索欄，但不能隱藏標題。我不知道什麼是錯的。這裏的代碼如何擴展搜索欄並同時隱藏其他元素？

<! DOCTYPE html> 
<html> 
<head> 


<style> 
      .header, div, .search{ 
       display: inline; 
      } 
      .search{ 
      width: 150px; 
      transition: all 1s ease-in-out; 
      -webkit-transition: all 1s ease-in-out; 
      } 
      .search:focus{ 
      width: 100%; 
      } 
      .search:focus .header{ 
      display: none; 
      } 
     </style> 


</head> 


<body> 


<h1 class="header">myWebsite</h1> 


<div> 
    <input type="text" class="search" name="search" placeholder="search..."> 
    </div> 


</body> 
</html>

所以請幫助我。

來源

2017-01-14 Ranjoy Konsam

答案就在JavaScript中。似乎只有CSS不能實現它。我在onblur上使用show（），並在onclick上隱藏（）。 –

試試這個，頭會submiting輸入時隱藏：

<! DOCTYPE html> 
<html> 
<head> 


<style> 
      .header, div, .search{ 
       display: inline; 
      } 
      .search{ 
      width: 150px; 
      transition: all 1s ease-in-out; 
      -webkit-transition: all 1s ease-in-out; 
      } 
      .search:focus{ 
      width: 100%; 
      } 
      .search:focus .header{ 
      display: none; 
      } 
     </style> 


</head> 


<body> 


<h1 id="header">myWebsite</h1> 


<div> 
    <input type="text" id="search" name="search" placeholder="search..." onchange="hide()"> 
    </div> 


</body> 
<script> 
function hide() { 
    document.getElementById("header").style.display = "none"; 
} 
</script> 
</html>

來源

2017-01-14 20:27:40

CSS唯一的解決方案將更受歡迎... – Raphael

CSS不提供事件，所以添加onchange事件或關鍵事件將是不可能的，JavaScript是唯一的方法來做到這一點。我看到你開始學習，我建議你開始學習jQuery，它有一個非常輕的API，這對於初學者來說很棒;） –

不，我不開始學習:)已經開發了很多年 - 只是FYI 。我知道CSS中沒有這樣的解決方案，但我認爲JS解決方案不是目標... – Raphael

如何擴展搜索欄並同時隱藏其他元素？

回答

相關問題