2017-04-19 53 views
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>

回答

4

演示我希望它会为你工作。所以请尝试这个选项。

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <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> 
 
    <script> 
 
$(document).ready(function(){ 
 
      var submitIcon = $('.searchbox-icon'); 
 
      var inputBox = $('.searchbox-input'); 
 
      var searchBox = $('.searchbox'); 
 
      var isOpen = false; 
 
      submitIcon.click(function(){ 
 
       if(isOpen == false){ 
 
        searchBox.addClass('searchbox-open'); 
 
        inputBox.focus(); 
 
        isOpen = true; 
 
       } else { 
 
        searchBox.removeClass('searchbox-open'); 
 
        inputBox.focusout(); 
 
        isOpen = false; 
 
       } 
 
      }); 
 
      submitIcon.mouseup(function(){ 
 
        return false; 
 
       }); 
 
      searchBox.mouseup(function(){ 
 
        return false; 
 
       }); 
 
      $(document).mouseup(function(){ 
 
        if(isOpen == true){ 
 
         $('.searchbox-icon').css('display','block'); 
 
         submitIcon.click(); 
 
        } 
 
       }); 
 
     }); 
 
      function buttonUp(){ 
 
       var inputVal = $('.searchbox-input').val(); 
 
       inputVal = $.trim(inputVal).length; 
 
       if(inputVal !== 0){ 
 
        $('.searchbox-icon').css('display','none'); 
 
       } else { 
 
        $('.searchbox-input').val(''); 
 
        $('.searchbox-icon').css('display','block'); 
 
       } 
 
      } 
 
    </script> 
 
    
 
    
 
    <style> 
 
    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; 
 
} 
 

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

 
.searchbox{ 
 
    position:relative; 
 
    min-width:50px; 
 
    width:0%; 
 
    height:50px; 
 
    top: 240px; 
 
    margin: 0 auto; 
 
    overflow:hidden; 
 
    
 
    -webkit-transition: width 0.3s; 
 
    -moz-transition: width 0.3s; 
 
    -ms-transition: width 0.3s; 
 
    -o-transition: width 0.3s; 
 
    transition: width 0.3s; 
 
} 
 

 
.searchbox-input { 
 
    top: 0; 
 
    border: 0; 
 
    outline: 0; 
 
    background: transparent; 
 
    width: 200px; 
 
    height: 45px; 
 
    margin: 0 auto; 
 
    padding: 0 10px; 
 
    font-size: 18px; 
 
    color: #fff; 
 
} 
 
.searchbox-input::-webkit-input-placeholder { 
 
    color: #d74b4b; 
 
} 
 
.searchbox-input:-moz-placeholder { 
 
    color: #d74b4b; 
 
} 
 
.searchbox-input::-moz-placeholder { 
 
    color: #d74b4b; 
 
} 
 
.searchbox-input:-ms-input-placeholder { 
 
    color: #d74b4b; 
 
} 
 
.searchbox .searchbox-icon img{display:none;} 
 
.searchbox-open .searchbox-icon img{display:block !important;} 
 

 
.searchbox-icon { 
 
    width: 45px; 
 
    height: 45px; 
 
    display: block; 
 
    position: absolute; 
 
    top: 10px; 
 
    font-family: verdana; 
 
    font-size: 22px; 
 
    right: -10px; 
 
    padding: 0; 
 
    margin: 0; 
 
    border: 0; 
 
    outline: 0; 
 
    text-align: center; 
 
    cursor: pointer; 
 
    color: #dcddd8; 
 
} 
 
.searchbox-submit { 
 
    background: transparent; 
 
    color: transparent; 
 
    border: none; 
 
    box-shadow: none; 
 
    position: absolute; 
 
    top: 0; 
 
    height: 45px; 
 
    width: 45px; 
 
    background: url(https://cdn4.iconfinder.com/data/icons/pictype-free-vector-icons/16/search-128.png); 
 
    background-size: cover; 
 
} 
 
.searchbox-open .searchbox-submit { 
 
    background: unset; 
 
} 
 
.searchbox-submit img, .searchbox-icon img{ 
 
width:22px; 
 
} 
 
.searchbox-open { 
 
    width: 250px; 
 
    border-radius: 20px; 
 
    height: 45px; 
 
    padding: 0; 
 
    background: transparent; 
 
    border: 2px solid #ccc; 
 
} 
 
form.searchbox input.searchbox-input { 
 
    display: none; 
 
} 
 
form.searchbox-open input.searchbox-input { 
 
display: block !important; 
 
background: #fff; 
 
margin: 0; 
 
width: 100%; 
 
color: black; 
 
} 
 

 
    </style> 
 
</head> 
 
<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> 
 
     <form class="searchbox"> 
 
     <input type="search" placeholder="Search......" name="search" class="searchbox-input" onkeyup="buttonUp();" required> 
 
     <input type="submit" class="searchbox-submit" placeholder=""> 
 
     <span class="searchbox-icon"><img src="https://www.materialui.co/materialIcons/navigation/close_black_144x144.png"></span> 
 
    </form> 
 
     <h1 id="genericText" class="text-center"> Click on icon to search </h1> 
 
    </div> 
 
</body> 
 
</html>

+0

嗨!我相信这是对我的目标的正确轨道,谢谢!我想知道为什么有时候我按下搜索图标时,屏幕左上角有一个“请填写此字段”的文字?编辑:我看到它是如何发生的,如果我点击图标的左侧,文本出现。这段代码来自哪里? – Philosopho

+0

实际上,在这个字段中添加了验证的必需属性,它是html表单的属性。如果你不需要这个,那么你可以从第一个输入元素中删除它。 如果您根据您的需求为您提供正确的答案,请您接受答案。 –

1

您可以添加和关闭按钮的点击删除类旁边的输入框,并点击搜索图标。

这里是低于

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