私は合計JavaScriptの初心者です。ユーザーがトップバーに追加した検索アイコンをクリックしたときに表示される検索バーを作成しようとしています。私はこれを使用しましたtutorialユーザーのクリック/タップが外になると検索バーが消える
私は自分のニーズに適応しましたが、下のコードを追加すると(チュートリアルと同じですが)、何かが間違っているようです。
// Close the dropdown menu 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');
}
}
ユーザーがアイコンをタップすると、検索バーが表示されますが、私は何かを書くために検索フィールドを選択しようとするならば、それが消えます。私はチェックして、上のチュートリアルで同じ動作に気がつきました(ドロップダウンメニュー内のリンクの1つをクリックするとドロップダウンメニューが消えます)。
私はそれがイベントターゲットと関係があることを知っています。誰が私は何を変えなければならないと考えているのですか? HTMLマークアップは同じですが、ドロップダウンメニューの代わりに検索フォームを追加しました。
ありがとうございました!
[ユーザーがDIVをクリックしたときにjQueryを使用して非表示にする場合はjQueryを使用します](http://stackoverflow.com/questions/1403615/use-jquery-to-hide-a-div-when-the- user-clicks-outside-of-it) –
チュートリアルのように動作します。これを確認してください(https://jsfiddle.net/pandeyvishal1986/y598xd5d/#&togetherjs=a0mpQAwpVc) – RonyLoud
あなたのタイトルは誤解を招くものです。逆のことをしようとしているため、検索ボックスのクラスは何ですか? –