Всем привет. Столкнулся с задачей которую не могу решить. Код привел ниже. как видите это выпадающее по кнопке поле поиска с ссылками на страны. Поиск с фильтром работает, все хорошо. Проблема в другом: нажимая на ссылку например (Америка) с названием страны должен появляться блок Первый блок и одновременно должен закрываться список с поиском. И если после этот снова открыть поиск, нажав по кнопке ВЫБРАТЬ, то блок Первый блок должен скрыться (display: none;) . Сейчас все работает криво. Не знаю как переписать скрипты? помогите разобраться!
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #3e8e41;
}
#myInput {
box-sizing: border-box;
background-image: url('searchicon.png');
background-position: 14px 12px;
background-repeat: no-repeat;
font-size: 16px;
padding: 14px 20px 12px 45px;
border: none;
border-bottom: 1px solid #ddd;
}
#myInput:focus {outline: 3px solid #ddd;}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f6f6f6;
min-width: 230px;
overflow: auto;
border: 1px solid #ddd;
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content li {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #ddd;}
.show {display: block;}
.block-tild {
display: none;
background-color: #f6f6f6;
width: 230px;
height: 500px;
overflow: auto;
border: 1px solid #000;
z-index: 1;
}
</style>
</head>
<body>
<h1>Выпадающий поиск/фильтр</h1>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn"> Выпадающий</button>
<div id="myDropdown" class="dropdown-content">
<input type="text" placeholder="Поиск.." id="myInput" onkeyup="filterFunction()">
<a href="#" onclick="myFunction(); openbox('box1'); " >Америка</a>
<a href="#" onclick="myFunction(); openbox('box2');" >Африка</a>
<a href="#" onclick="myFunction(); openbox('box3');" >Россия</a>
</div>
</div>
<div class="block-tild" id="box1">Первый блок</div>
<div class="block-tild" id="box2">Второй блок</div>
<div class="block-tild" id="box2">Третий блок</div>
<script>
/* Когда пользователь нажимает на кнопку, переключаться раскрывает содержимое */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
function filterFunction() {
var input, filter, ul, li, a, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
div = document.getElementById("myDropdown");
a = div.getElementsByTagName("a");
for (i = 0; i < a.length; i++) {
txtЗначение = a[i].textСодержание || a[i].innerText;
if (txtЗначение.toUpperCase().indexOf(filter) > -1) {
a[i].style.display = "";
} else {
a[i].style.display = "none";
}
}
}
</script>
<script type="text/javascript">
function openbox(id){
display = document.getElementById(id).style.display;
if(display=='none'){
document.getElementById(id).style.display='block';
}else{
document.getElementById(id).style.display='none';
}
}
</script>
</body>
</html>
