javascript - 全屏搜索覆盖(未打开)
问题描述
嘿,我想在点击时创建覆盖全屏搜索,所以我尝试了这个:
这是导航栏代码:
<nav class="navbar navbar-default navbar-color">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar2">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar2" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#search"><i class="fa fa-search"></i></a></li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
这是覆盖代码:
<div id="search">
<button type="button" class="close">×</button>
<form>
<input type="search" value="" placeholder="SEARCH KEYWORD(s)"/>
<button type="submit" class="btn btn-primary">Search</button>
</form>
这是CSS:
#search {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-webkit-transform: translate(0px, -100%) scale(0, 0);
-moz-transform: translate(0px, -100%) scale(0, 0);
-o-transform: translate(0px, -100%) scale(0, 0);
-ms-transform: translate(0px, -100%) scale(0, 0);
transform: translate(0px, -100%) scale(0, 0);
opacity: 0;
}
#search input[type="search"] {
position: absolute;
top: 50%;
width: 100%;
color: white;
background: rgba(0, 0, 0, 0);
font-size: 60px;
font-weight: 300;
text-align: center;
border: 0px;
margin: 0px auto;
margin-top: -51px;
padding-left: 30px;
padding-right: 30px;
outline: none;
}
#search .btn {
position: absolute;
top: 50%;
left: 50%;
margin-top: 61px;
margin-left: -45px;
background-color: limegreen;
border: black;
}
#search .close {
position: fixed;
top: 15px;
right: 15px;
color: #fff;
background-color: limegreen;
border-color: green;
opacity: 1;
padding: 10px 17px;
font-size: 27px;
}
#search.open {
-webkit-transform: translate(0px, 0px) scale(1, 1);
-moz-transform: translate(0px, 0px) scale(1, 1);
-o-transform: translate(0px, 0px) scale(1, 1);
-ms-transform: translate(0px, 0px) scale(1, 1);
transform: translate(0px, 0px) scale(1, 1);
opacity: 1;
}
对于 jquery,我使用了这个:
$(function() {
$('a[href="#search"]').on("click", function(event) {
event.preventDefault();
$("#search").addClass("open");
$('#search > form > input[type="search"]').focus();
});
$("#search, #search button.close").on("click keyup", function(event) {
if (
event.target == this ||
event.target.className == "close" ||
event.keyCode == 27
) {
$(this).removeClass("open");
}
});
$("form").submit(function(event) {
event.preventDefault();
return false;
});
});
我知道这是很多代码,但我真的需要帮助,点击不起作用和检查元素,控制台上没有任何内容显示为错误....
任何帮助,将不胜感激
谢谢你们的时间
解决方案
推荐阅读
- apache - 新网站访问者不会下载资源(样式表、图像、javascript 等)是否有原因?
- unity3d - 使用 URP 的后处理堆栈
- javascript - 如何根据选择区域选择和取消选择列表项
- bash - 在 vm 中的新终端窗口中运行进程
- python - 具有多个数据集的 Pytorch Dataloader shuffle
- java - 具有通用属性的类的杰克逊序列化丢失了通用属性的类型信息
- opencv - 使用 Logitech C270 网络摄像头和 Opencv4 在图像捕获期间出现水平滚动条带?怎么修
- javascript - qs.parse 上的 qs.strinigfy 将单个整数数组转换为整数。如何解决这个问题?
- c++ - C ++如何找出函数是成员还是非成员。换句话说,“this”指针可用
- javascript - JavaScript 在选择器中定位多个类