我是一个总的JavaScript新手。我试图创建一个搜索栏,当用户点击我已经添加到顶栏的搜索图标时出现。我用这个tutorial当用户点击/点击以外时,使搜索栏消失
我调整了HTML标记以满足我的需要,但是,当我添加下面的代码(与本教程相同)时,某些东西似乎出错了。
// 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');
}
}
当用户点击图标时会出现搜索栏,但如果我尝试选择搜索字段来写东西,它会消失。我检查了一下,发现上面的教程有相同的行为(如果你点击下拉菜单中的其中一个链接,下拉菜单就会消失)。
我知道它与事件目标有关。有谁知道我应该改变什么以及在哪里? HTML标记是相同的,除了下拉菜单,我添加了一个搜索表单。
谢谢!
可能的重复[使用jQuery隐藏DIV,当用户点击它之外](http://stackoverflow.com/questions/1403615/use-jquery-to-hide-a-div-when-the-用户点击 - 它之外) –
它在教程中工作正常。检查这[[小提琴](https://jsfiddle.net/pandeyvishal1986/y598xd5d/#&togetherjs=a0mpQAwpVc) – RonyLoud
你的标题是误导性的,因为你试图做相反的事情,你的搜索框是什么类? –