0
我想实现这个功能,这是freecodecamp的目标之一:https://codepen.io/FreeCodeCamp/full/wGqEga/ 具体来说,我想将搜索图标转换为带有输入文本的表单,然后在用户单击X时转换回搜索图标。不知道我是否在正确的轨道上,但是当我点击搜索图标时,没有发生过渡。非常感谢您的帮助!从glyphicon转换到输入文本?
$(document).ready(function(){
$('#SearchBar i').on('click', function(){
$('#SearchBar').html('<form><input type="text" style="border: none;"><span> X</span></input></form>');
$('#SearchBar form').toggleClass('clicked');
$('input').toggleClass('clicked');
});
});
body#bootstrapOverride {
background-color: rgba(255, 10, 10, 0.8);
}
#random_page{
cursor: pointer;
font-size: 16px;
position: relative;
top: 240px;
margin: auto;
width: 50%;
color: white;
text-decoration: none;
}
#SearchBar{
position: relative;
margin: auto;
top: 232px;
width: 0px;
left: 0px;
font-size: 40px;
padding: 0px;
cursor: pointer;
-webkit-transition: all 2s linear 0s;
-moz-transition: all 2s linear 0s;
-ms-transition: all 2s linear 0s;
-o-transition: all 2s linear 0s;
transition: all 2s linear 0s;
transition-property: width, border-radius, border, padding;
}
#SearchBar form.clicked{
position: relative;
margin: auto;
top: 0px;
left: -120px;
width: 250px;
padding: 10px;
border: 5px;
background-color: white;
border-radius: 20px;
font-size: 14px;
}
input{
width: 0px;
-webkit-transition: width 2s linear 0s;
-moz-transition: width 2s linear 0s;
-ms-transition: width 2s linear 0s;
-o-transition: width 2s linear 0s;
transition: width 2s linear 0s;
}
input.clicked{
width: 200px;
}
span{
cursor: pointer;
font-size: 0px;
color: blue;
font-family: papyrus;
-webkit-transition: font-size 2s linear 0s;
-moz-transition: font-size 2s linear 0s;
-ms-transition: font-size 2s linear 0s;
-o-transition: font-size 2s linear 0s;
transition: font-size 2s linear 0s;
}
#genericText{
position: relative;
width: 50%;
margin: auto;
top: 240px;
color: white;
font-type: bold;
font-size: 16px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="jquery-3.2.0.min.js"> \t </script>
<body id="bootstrapOverride">
<div class="container-fluid" id="parent">
<div id="child">
<h1 class="text-center"><a href="https://en.wikipedia.org/wiki/Special:Random" target="_blank" id="random_page"> Click here for a random article </a></h1>
<div id="SearchBar">
<i class="glyphicon glyphicon-search" id="glyph"> </i>
</div>
<div id="child4">
<h1 id="genericText" class="text-center"> Click on icon to search </h1>
</div>
</div>
</body>
嗨!我相信这是对我的目标的正确轨道,谢谢!我想知道为什么有时候我按下搜索图标时,屏幕左上角有一个“请填写此字段”的文字?编辑:我看到它是如何发生的,如果我点击图标的左侧,文本出现。这段代码来自哪里? – Philosopho
实际上,在这个字段中添加了验证的必需属性,它是html表单的属性。如果你不需要这个,那么你可以从第一个输入元素中删除它。 如果您根据您的需求为您提供正确的答案,请您接受答案。 –