如何扩展搜索栏并同时隐藏其他元素？

我正在尝试在一行中创建一个搜索栏以及一个页眉。当我专注于搜索栏时，我希望它展开全宽并隐藏标题。我可以展开搜索栏，但不能隐藏标题。我不知道什么是错的。这里的代码如何扩展搜索栏并同时隐藏其他元素？

<! 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

如何扩展搜索栏并同时隐藏其他元素？

回答

相关问题