单击外部按钮/下拉列表时，下拉列表不会关闭

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>