Question

我正在尝试创建一个内部带有过滤器/搜索功能的下拉菜单，当我单击“搜索字段”时，如果我单击内部，则会关闭整个列表，但无法使其保持打开状态。在下拉菜单外部单击时有关闭它的好方法，而在搜索字段内部单击时有保持打开的好方法吗？

这是我到目前为止得到的：

<ul>
<div class="navbar">
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Varuhus</button>
<div class="dropdown">
<div id="myDropdown" class="dropdown-content">
<input type="text" placeholder="Search.." id="myInput" onkeyup="filterFunction()">
  <a href="https://www.google.com" target="targetframe2">E-handel</a>
      <a href="https://www.google.com" target="targetframe2">Eskilstuna</a>
      <a href="https://www.google.com" target="targetframe2">Borås</a>
      <a href="https://www.google.com" target="targetframe2">Gävle</a>
  <a href="https://www.google.com" target="targetframe2">Göteborg Bäckebol</a>
  <a href="https://www.google.com" target="targetframe2">Göteborg Högsbo</a>
  <a href="https://www.google.com" target="targetframe2">Göteborg Torpavallen</a>
  <a href="https://www.google.com" target="targetframe2">Helsingborg</a>
  <a href="https://www.google.com" target="targetframe2">Jönköping</a>
  <a href="https://www.google.com" target="targetframe2">Kalmar</a>
  <a href="https://www.google.com" target="targetframe2">Kristianstad</a>
  <a href="https://www.google.com" target="targetframe2">Linköping</a>
  <a href="https://www.google.com" target="targetframe2">Luleå</a>
  <a href="https://www.google.com" target="targetframe2">Lund</a>
  <a href="https://www.google.com" target="targetframe2">Malmö Svågertorp</a>
  <a href="https://www.google.com" target="targetframe2">Norrköping</a>
  <a href="https://www.google.com" target="targetframe2">Skövde</a>
  <a href="https://www.google.com" target="targetframe2">Stockholm Barkarby</a>
  <a href="https://www.google.com" target="targetframe2">Stockholm Gallerian</a>
  <a href="https://www.google.com" target="targetframe2">Stockholm Heron City</a>
  <a href="https://www.google.com" target="targetframe2">Stockholm Länna</a>
  <a href="https://www.google.com" target="targetframe2">Stockholm Nacka</a>
  <a href="https://www.google.com" target="targetframe2">Stockholm Täby</a>
  <a href="https://www.google.com" target="targetframe2">Sundsvall</a>
  <a href="https://www.google.com" target="targetframe2">Umeå</a>
  <a href="https://www.google.com" target="targetframe2">Uppsala</a>
  <a href="https://www.google.com" target="targetframe2">Västerås</a>
  <a href="https://www.google.com" target="targetframe2">Växjö</a>
  <a href="https://www.google.com" target="targetframe2">Örebro</a>
   </div>
 </div> 
</div>
 <a href="#Aroma1">Back up top</a>
 <a href="#news">Nothing here yet</a>
</ul>


  <div>
  <iframe src="page1.html" name="targetframe2" width="1890" height="930"> allowTransparency="true" scrolling="no" frameborder="0" >
  </iframe>
  </div>


</iframe>




<script>
/* When the user clicks on the button, 
toggle between hiding and showing the dropdown content */
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++) {
    if (a[i].innerHTML.toUpperCase().indexOf(filter) > -1) {
        a[i].style.display = "";
    } else {
        a[i].style.display = "none";
     }
   }
 }
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {

var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
  var openDropdown = dropdowns[i];
  if (openDropdown.classList.contains('show')) {
    openDropdown.classList.remove('show');
      }
    }
  }
}


</script>

</body>
</html>

带有搜索栏的下拉菜单。关闭问题

0 个答案: