Question

我正在尝试实现freecodecamp的目标之一：https://codepen.io/FreeCodeCamp/full/wGqEga/ 具体来说，我想将搜索图标转换为带有输入文本的表单，然后在用户点击X时转换回搜索图标。我不知道我是否在正确的轨道上，但是当我点击搜索时icon没有过渡。非常感谢您的帮助！

7 2 = 9

7 2 5 = 14

7 2 5 - 3 = 11

7 2 5 - 3 3 = 14

7 2 5 -3 3 6 = 20

$(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;
}

Answer 1

我希望它对你有用。所以请尝试这个选项。

fragment

Answer 2

您可以点击输入框旁边的关闭按钮添加和删除课程，也可以点击搜索图标。

以下是

的演示

＆＃13;

$(document).ready(function() {
  $('#close').on('click', function() {
    $("#glyph").removeClass('f_out_g');
    $("#form_div").removeClass("enlarge");
  });
  $('#glyph').on('click', function() {
    $("#glyph").addClass('f_out_g');
    $("#form_div").addClass("enlarge");
  });
});

＆＃13;

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 {
  -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;
}

#f {
  position: absolute;
  transform: scale(1);
  transform: translate(-50%, -50%);
  transition: all 0.4s left: 50%;
  top: 50%;
  white-space: nowrap;
  z-index: 1;
}

#form_div {
  transition: all 0.4s;
  transform: scaleX(0);
}

.enlarge {
  transform: scaleX(1) !important;
  z-index: 5;
}

#glyph {
  position: relative;
  opacity: 1;
  transition: all 0.4s;
  z-index: 2;
}

#f:hover #glyph {}

.f_out_g {
  opacity: 0 !important;
  z-index: 0;
  
}

form * {
  font-size: inherit
}

＆＃13;

<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">
</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>
        <form id="f">
          <div id="form_div">
            <input type="text" style="border: none;"><span id="close">X</span>
          </div>

        </form>
      </div>
      <div id="child4">
        <h1 id="genericText" class="text-center"> Click on icon to search </h1>
      </div>
    </div>
</body>

＆＃13;

从glyphicon转换为输入文本？

2 个答案: