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表單的屬性。如果你不需要這個，那麼你可以從第一個輸入元素中刪除它。 如果您根據您的需求爲您提供正確的答案，請您接受答案。 –