Question

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

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

所以请帮帮我。

Answer 1

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

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

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

1 个答案: