單擊外部按鈕/下拉菜單時，下拉菜單不會關閉

Question

所以我有一個小問題。 如果您查看該代碼段，則該下拉列表的工作方式與我的網站上的操作有所不同。 在我的網站上，您可以搜索，一切正常。 但是，當您打開下拉菜單然后在外部單擊時，我希望它關閉，但沒有。 我認為這與腳本有關。 希望能有所幫助。

  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> 

Answer 1

嘗試使用類似的方法，在單擊時使用文檔事件偵聽器，並在任何菜單元素上使用e.stopPropagation（）。

另外，為什么每個鏈接都有兩個href？

 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 menu = document.querySelector('.dropdown'); menu.addEventListener('click', function(event) { event.stopPropagation(); }); document.addEventListener('click', 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="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>