-1
私は同様の記事を見回し、この実装の周りのjavascriptがどのように機能するかにつきまとうようです。ドロップダウンを開始するボタンをクリックするフィルタがあるドロップダウンがあります。これは正常に動作します。ただし、このドロップダウンを解除する唯一の方法は、元のボタンをクリックすることです。私はドロップダウン以外の画面上の他の場所をクリックすると却下しようとしています。私はこれを近づいてきた方法ではJavaScriptを持つ癖があるかどうかわからないんだけど、次のコードは、私のアプローチを設定し、概念レベルで、私はこれが正常に動作すべきだと思う：ページのクリックでドロップダウンを閉じる
コード：
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
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');
}
}
}
}
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";
}
}
}<div class="dropdown">
<button onclick="myFunction()" class="dropbtn"><img src="bread.png" height="50" width="50" style="vertical-align:middle" align="left"><a>Testing</a></button>
<div id="myDropdown" class="dropdown-content">
<input type="text" placeholder="Search.." id="myInput" onkeyup="filterFunction()">
<a> Dropdown Content 1 </a>
<a> Dropdown Content 2 </a>
<a> Dropdown Content 3 </a>
</div>
</div>おかげさまであり、ありがとうございました！
？ –
ボタンでないときに 'window.onclick'のこの要素からshowクラスを削除しないのはなぜですか？ – amiramw