0
所以我遇到了一些問題。如果你看一下代碼片段，下拉菜單與我的網站上的片段有點不同。在我的網站上，您可以搜索並且一切正常。但是，當您打開下拉菜單然後單擊外部時，我希望它關閉，但不是。我認爲這與劇本有關。希望能得到幫助。點擊外部按鈕/下拉菜單時，下拉菜單不會關閉
function myFunction() {
var dropDown = document.getElementById('myDropdown'),
items = dropDown.children,
height = 0;
dropDown.classList.toggle('show');
for (var i = 1; i < 10; i++) {
height += items[i].offsetHeight;
}
dropDown.style.height = height + 'px';
}
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++) {
if (a[i].innerHTML.toUpperCase().indexOf(filter) > -1) {
a[i].style.display = "";
} else {
a[i].style.display = "none";
}
}
}
var btn = document.querySelector('.dropbtn');
btn.addEventListener('blur', function() {
var dd = document.querySelector('.dropdown-content');
if (dd.classList.contains('show')) {
dd.classList.remove('show');
}
});.dropbtn {
background-color: #0d0d0d;
color: white;
padding: 18px;
height: 65px;
width: 125px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover,
.dropbtn:focus {
background-color: white;
color: black;
}
#myInput {
border-box: box-sizing;
background-image: url('searchicon.png');
background-position: 14px 12px;
background-repeat: no-repeat;
font-size: 16px;
padding: 14px 20px 12px 45px;
border: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f6f6f6;
min-width: 230px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
font-family: 'Lato', serif;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {
background-color: #ddd
}
.show {
display: block;
}<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">CARS</button>
<div id="myDropdown" class="dropdown-content">
<input type="text" placeholder="Search.." id="myInput" onkeyup="filterFunction()">
<a href="C:\Users\aleksar\Documents\Random\programmering\justcars.com\Cars\Acura\acura.html" href="#acura">Acura</a>
<a href="alfa_romeo.html" href="#alfa romeo">Alfa Romeo</a>
<a href="aston_martin.html" href="#aston martin">Aston Martin</a>
<a href="audi.html" href="#audi">Audi</a>
<a href="bentley.html" href="#bentley">Bentley</a>
<a href="bmw.html" href="#bmw">BMW</a>
<a href="bugatti.html" href="#bugatti">Bugatti</a>
<a href="buick.html" href="#buick">Buick</a>
<a href="cadillac.html" href="#cadillac">Cadillac</a>
<a href="chevrolet.html" href="#chevrolet">Chevrolet</a>
<a href="chrysler.html" href="#chrysler">Chrysler</a>
<a href="dodge.html" href="#dodge">Dodge</a>
<a href="ferrari.html" href="#ferrari">Ferrari</a>
<a href="fiat.html" href="#fiat">Fiat</a>
<a href="ford.html" href="#ford">Ford</a>
<a href="gensis.html" href="#gensis">Gensis</a>
<a href="gmc.html" href="#gmc">GMC</a>
<a href="honda.html" href="#honda">Honda</a>
<a href="hyundai.html" href="#custom">Hyundai</a>
<a href="infiniti.html" href="#support">Infiniti</a>
<a href="jaguar.html" href="#tools">Jaguar</a>
<a href="jeep.html" href="#jeep">Jeep</a>
<a href="kia.html" href="#kia">Kia</a>
<a href="koenigsegg.html" href="#koenigsegg">Koenigsegg</a>
<a href="lamborghini.html" href="#lamborghini">Lamborghini</a>
<a href="land_rover.html" href="#land rover">Land Rover</a>
<a href="lexus.html" href="#lexus">Lexus</a>
<a href="lincoln.html" href="#lincoln">Lincoln</a>
<a href="lotus.html" href="#lotus">Lotus</a>
<a href="maserati.html" href="#maserati">Maserati</a>
<a href="mazda.html" href="#mazda">Mazda</a>
<a href="mclaren.html" href="#mclaren">McLaren</a>
<a href="mercedes_amg.html" href="#mercedes-amg">Mercedes-AMG</a>
<a href="mercedes_benz.html" href="#mercedes-benz">Mercedes-Benz</a>
<a href="mercedes_maybach.html" href="#mercedes-maybach">Mercedes-Maybach</a>
<a href="mini.html" href="#mini">Mini</a>
<a href="mitsubishi.html" href="#mitsubishi">Mitsubishi</a>
<a href="nissan.html" href="#nissan">Nissan</a>
<a href="pagani.html" href="#pagani">Pagani</a>
<a href="porsche.html" href="#porsche">Porsche</a>
<a href="ram.html" href="#ram">Ram</a>
<a href="rolls_royce.html" href="#rolls-royce">Rolls-Royce</a>
<a href="scion.html" href="#scion">Scion</a>
<a href="smart.html" href="#smart">Smart</a>
<a href="spyker.html" href="#spyker">Spyker</a>
<a href="subaru.html" href="#subaru">Subaru</a>
<a href="tesla.html" href="#tesla">Tesla</a>
<a href="toyota.html" href="#toyota">Toyota</a>
<a href="volkswagen.html" href="#volkswagen">Volkswagen</a>
<a href="volvo.html" href="#volvo">Volvo</a>
</div>
</div>
在你的榜樣它關閉。你確定有問題？ – Dekel
它確實關閉了Chrome和Firefox。也許搜索輸入框是問題：當點擊菜單關閉 – Ivan
我知道它可以在代碼片段上工作，但是當我從我的文檔打開文件時它不起作用。我曾嘗試過微軟邊緣和鉻。 @Ivan –