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

我正在尝试在一行中制作一个搜索栏和一个标题。当我专注于搜索栏时，我希望它扩展全宽并隐藏标题。我可以展开搜索栏，但无法隐藏标题。我不知道怎么了。这是代码

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

所以请帮帮我。

试试这个，提交输入时标题将隐藏：

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

相关内容

最新更新

热门标签：