Разверните панель поиска с помощью значка поиска, а также покажите значок закрытия при нажатии с помощью Javascript. ⇐ CSS

[Anonymous]

Я пытаюсь открыть расширенную панель поиска со значком поиска, а также со значком закрытия при нажатии, используя JavaScript. Здесь я прилагаю свой код. Ваша помощь будет оценена заранее. Я также прилагаю изображение, чтобы его можно было легко понять. Мой код находится при наведении, но я хочу сделать это при нажатии.

[img]https://i.sstatic. net/7jXNh.gif[/img]



< pre class="snippet-code-js lang-js Prettyprint-override">

Код: Выделить всё

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

Код: Выделить всё

Подробнее здесь: https://stackoverflow.com/questions/602 ... sing-javas