javascript - 如何在移动屏幕上的可切换 div 中显示隐藏的搜索表单？

标签 javascript html css media-queries media

由于搜索表单在媒体查询中没有显示，因此如何在当前空白的移动设备上显示隐藏的搜索表单？搜索容器是 toggled.search_mobi 是触发按钮。搜索容器目前只能在桌面上查看。使用 CSS 或 Javascript 是否可行。

 var toggle  = document.querySelector(".search_mobi");
var content = document.querySelector(".search_container");

toggle.addEventListener("click", function() {
  content.classList.toggle("displaysb");
});
@import url("//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");


*{
    margin: 0;
   
}
header{
  position: fixed;
  top: 0;
  right: 5px;
  left: 5px;
  z-index: 1;

  

}
.Navbar {
    background-color: #46ACC2;
    display: flex;
    padding: 20px;
    max-width: auto;
    font-family: sans-serif;
    color: white;
  }
  .Navbar__Link {
    padding-right: 10px;
    
  }
  .Navbar__Link-brand{
    padding-left: 50px;
    
    
  }

  .Navbar__Items {
    display: flex;
    vertical-align: middle;

  }
  .Navbar__Items--right {
    margin-left:auto;
  }
  .Navbar__Link-toggle {
    display: none;
  }
.search {
  position: relative;
  display: flex;
  font-size: 18px;
  margin-left: auto;
  vertical-align: middle;
}
.search_mobi{
  display: none;
}

.search input {
  width: 220px;
  height: 25px;
  background: #fff;
  border: 1px solid #fff;
  border-radius: 50px;
  box-shadow: 0 0 5px #ccc, 0 2px 2px #ebebeb inset ;
}

.search input { 
  text-indent: 30px;
  color:black;
  font-weight: bolder;
  padding: 5px;
}
.search .fa-search { 
  position: absolute;
  top: 5px;
  color: orange;
  left: 10px;
  font-size: 15px;
}



@media only screen and (max-width: 768px) {
 
  .search_container{
  display:block;
position: static;
margin-left: 5px;
margin-right: 5px;
  margin-top: 62px;
  height: 0px;
  width: auto;
  background-color: yellow;
z-index: 2;
-webkit-transition: height 0.3s ease;
transition: height 0.3s ease;
}
.search_container.displaysb{
  
  height: 35px;
}
.Navbar__Items,
    .Navbar {
      flex-direction: column;
   }
    .search{
      display: none;
    }
    .search_mobi{
      display: inline;
      position: absolute;
      vertical-align: middle;
      color: orange;
      background-color: #fff;
      border-radius: 50%;
      padding: 6px;
      left: auto;
      font-size: 16px;
      cursor: pointer;
    }

  .Navbar__Items {
      display:none;
     
    }
  .Navbar__Items--right {
      margin-left:0;
    }
  .Navbar__ToggleShow {
      display: flex;
      padding-top: 20px;
      height:200px;
     z-index: 5;
      
    }
    .Navbar__Link{
      padding-bottom: 20px;
      align-self: center;
    }

  .Navbar__Link-brand{
   margin: 0 auto;
    padding: 0;
    }
 }
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>website</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="malinav.css" />
   <link rel="stylesheet" type="text/css" href="main.css">
   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
</head>
<body>
    <header class="Navbar">

 <div class="search_mobi">
  <span class="fa fa-search"></span>
</div>
        <div class=" Navbar__Link-brand">
           Website 
         </div>
        
<div class="search ">
 
  <input placeholder="Find products and services">
   <span class="fa fa-search"></span>
</div>


        

       <nav class="Navbar__Items Navbar__Items--right ">
         
         <div class="Navbar__Link">
           Mangoes
         </div>
         <div class="Navbar__Link">
           Oranges
         </div>
         <div class="Navbar__Link">
           Bananas
         </div>
         <div class="Navbar__Link">
           Pears
         </div>
         <div class="Navbar__Link">
           Avocado
         </div>
       </nav>

    </header>

<div class="search_container">
<div class="search">
   <input placeholder="Find products and services">
   <span class="fa fa-search"></span>
</div>
</div>

    

     <script src="malinav.JS"></script>
</body>
</html>

最佳答案

你需要设置id来搜索div

<div id="search" class="search">
   <input placeholder="Find products and services">
   <span class="fa fa-search"></span>
</div>

然后切换隐藏类

  document.querySelector("#search").classList.toggle("search");


var toggle  = document.querySelector(".search_mobi");
var content = document.querySelector(".search_container");

toggle.addEventListener("click", function() {
  content.classList.toggle("displaysb");
  document.querySelector("#search").classList.toggle("search");
});
@import url("//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");


*{
    margin: 0;
   
}
header{
  position: fixed;
  top: 0;
  right: 5px;
  left: 5px;
  z-index: 1;

  

}
.Navbar {
    background-color: #46ACC2;
    display: flex;
    padding: 20px;
    max-width: auto;
    font-family: sans-serif;
    color: white;
  }
  .Navbar__Link {
    padding-right: 10px;
    
  }
  .Navbar__Link-brand{
    padding-left: 50px;
    
    
  }

  .Navbar__Items {
    display: flex;
    vertical-align: middle;

  }
  .Navbar__Items--right {
    margin-left:auto;
  }
  .Navbar__Link-toggle {
    display: none;
  }
.search {
  position: relative;
  display: flex;
  font-size: 18px;
  margin-left: auto;
  vertical-align: middle;
}
.search_mobi{
  display: none;
}

.search input {
  width: 220px;
  height: 25px;
  background: #fff;
  border: 1px solid #fff;
  border-radius: 50px;
  box-shadow: 0 0 5px #ccc, 0 2px 2px #ebebeb inset ;
}

.search input { 
  text-indent: 30px;
  color:black;
  font-weight: bolder;
  padding: 5px;
}
.search .fa-search { 
  position: absolute;
  top: 5px;
  color: orange;
  left: 10px;
  font-size: 15px;
}



@media only screen and (max-width: 768px) {
 
  .search_container{
  display:block;
position: static;
margin-left: 5px;
margin-right: 5px;
  margin-top: 62px;
  height: 0px;
  width: auto;
  background-color: yellow;
z-index: 2;
-webkit-transition: height 0.3s ease;
transition: height 0.3s ease;
}
.search_container.displaysb{
  
  height: 35px;
}
.Navbar__Items,
    .Navbar {
      flex-direction: column;
   }
    .search{
      display: none;
    }
    .search_mobi{
      display: inline;
      position: absolute;
      vertical-align: middle;
      color: orange;
      background-color: #fff;
      border-radius: 50%;
      padding: 6px;
      left: auto;
      font-size: 16px;
      cursor: pointer;
    }

  .Navbar__Items {
      display:none;
     
    }
  .Navbar__Items--right {
      margin-left:0;
    }
  .Navbar__ToggleShow {
      display: flex;
      padding-top: 20px;
      height:200px;
     z-index: 5;
      
    }
    .Navbar__Link{
      padding-bottom: 20px;
      align-self: center;
    }

  .Navbar__Link-brand{
   margin: 0 auto;
    padding: 0;
    }
 }
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>website</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="malinav.css" />
    <link rel="stylesheet" type="text/css" href="main.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
</head>
<body>
    <header class="Navbar">
       <div class="search_mobi">
          <span class="fa fa-search"></span>
       </div>
       <div class=" Navbar__Link-brand">
          Website 
       </div>
       <div class="search ">
        <input placeholder="Find products and services">
        <span class="fa fa-search"></span>
      </div>
      <nav class="Navbar__Items Navbar__Items--right ">
         <div class="Navbar__Link">
           Mangoes
         </div>
         <div class="Navbar__Link">
           Oranges
         </div>
         <div class="Navbar__Link">
           Bananas
         </div>
         <div class="Navbar__Link">
           Pears
         </div>
         <div class="Navbar__Link">
           Avocado
         </div>
       </nav>
    </header>
<div class="search_container">
<div id="search" class="search">
   <input placeholder="Find products and services">
   <span class="fa fa-search"></span>
</div>
</div>

    

     <script src="malinav.JS"></script>
</body>
</html>

关于javascript - 如何在移动屏幕上的可切换 div 中显示隐藏的搜索表单？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50709119/

上一篇：javascript - 如何让一张表的列宽始终匹配另一张表对应的列宽？

下一篇：css - 仅使用 css 使 div 连续滑动(线性)

相关文章：

javascript - 适当过滤/映射/减少

javascript - 如何比较并获取两个对象数组的值？

javascript - 调用函数时，返回未定义

javascript - Node 服务器启动时解析json对象

javascript - 为什么我的第一个 setInterval 停止而第二个 setInterval 继续运行？

html - 将自定义搜索按钮完美对齐到我的搜索输入字段的左侧

html - 样式 .here 类 - ul div 类

jquery - jQuery 选项卡 UI 中的样式控件

html - 使 div 宽度适合内联 block 子项(每行的 div 数量未知)

HTML 输入字段在 Firefox 中不起作用

©2024 IT工具网  联系我们