javascript - 使用搜索图标展开搜索栏以及使用 Javascript 显示关闭图标 onclick

Question

我正在尝试使用 javascript 打开带有搜索图标以及单击关闭图标的扩展搜索栏。在这里我附上我的代码。我们将提前感谢您的帮助。我还附上了图片，所以可以很好地理解它。我的代码处于悬停状态，但我想点击它。

//Search Bar
        var searchBar = document.getElementById("express-form-typeahead");
        searchBar.addEventListener('click' , function(){ 
            var closeSearch = document.getElementById("closeSearch");
            closeSearch.style.display = "block";
        });
        window.addEventListener('mouseup', e =>{
            //alert(e);
                if(e.target != searchBar && e.target.parentNode != searchBar )
                {
                    var closeSearch = document.getElementById("closeSearch");
                    closeSearch.style.display = "";
                }                  
        });

.custom-search{position: relative;right:-12px;}
    #express-form-typeahead{background-color:transparent;background-image:url('../images/search.svg');background-position:5px center;background-repeat:no-repeat;background-size:15px;border:none;cursor:pointer;height:30px;padding:0 0 0 34px;position:relative;-webkit-transition:width 1.1s ease, background 1.1s ease;transition:width 1.1s ease, background 1.1s ease;width:0;}
    .close-search{display:none;-webkit-animation: fadeEffect1 2s;animation: fadeEffect1 2s;
    position: absolute;top:9px;right:9px;background-image: url('../images/close-icon-grey.png');width: 15px;
    height: 15px;background-repeat: no-repeat;background-size: 15px;}
    #express-form-typeahead:focus{background-color:#fff;border-bottom:1px solid #e7e7e7;cursor:text;outline:0;width:200px;border-radius: 0;}
    .search-btn{display:none;}
    input[type="search"]{-webkit-appearance:textfield;}
   /* Fade in tabs */
    @-webkit-keyframes fadeEffect1 {
        from {opacity: 0;}
        to {opacity: 1;}
    }
    @keyframes fadeEffect1 {
        from {opacity: 0;}
        to {opacity: 1;}
    }

<div class="custom-search">
                            <div class="cell-wrapper">
                                <input required="" name="q" placeholder="Blue Book" class="form-control" id="express-form-typeahead"  type="search">
                                <button class="search-btn" type="submit"><span class="icon"></span></button>
                                <div class="close-search" id="closeSearch"></div>
                            </div>
                        </div>

标签： javascripthtmlcssanimation

Answer 1

如果您的代码片段能够工作，我可以给您答案。但现在我只能指导你。在这种情况下，您最好使用切换类。当用户单击元素时，将添加切换类，当单击退出时，它将被删除。

var searchBar = document.getElementById("searchBar");
        searchBar.addEventListener('click' , function(){ 
            searchBar.classList.add("toggleClass");
        });
        window.addEventListener('mouseup', e =>{
            
                if(e.target != searchBar && e.target.parentNode != searchBar )
                {
                    searchBar.classList.remove("toggleClass");
                }                  
        });

.searchBar{
  width: 100px;
  background-color: silver;
  height: 50px;
  display: inline-block;
  transition-duration: 0.5s;
}

.searchBar .icon{
display: none;
}

.toggleClass{
  width: 300px;
  }
  
  .toggleClass .icon{
  display: block;
  }

<div id="searchBar" class="searchBar">
  <span class="icon">icon</span>
</div>