javascript - 如何在移动屏幕上的可切换 div 中显示隐藏的搜索表单?
问题描述
由于媒体查询中没有显示搜索表单,如何在移动设备上显示当前空白的隐藏搜索表单?搜索容器是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>
然后toggle
隐藏类
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>
推荐阅读
- java - iText7 自定义时间戳
- firebase - 如何乘以 Cloud Functions 超时时间?
- python - 在 Trimesh 中旋转网格
- android - 渲染像素流错误即将到来。但我的应用程序在颤振中运行良好
- javascript - 使用 if else 状态创建显示可用性的服务
- vb.net - 创建一个事件。此事件应在某个字符串已更改时发生
- javascript - 在javascript中获取文件夹大小
- c# - 使用 write XML 创建 XML 文件并将数据集写入其中
- php - 我无法回显 PHP cURL 响应的第一个索引
- php - 使用标头位置时获取 HTTP ERROR 500