当鼠标在外部单击时，Clickable下拉菜单不会关闭

Question

（请注意，如果此问题不适合在此处发布，请删除它。谢谢）

我正在学习jsp，并尝试在jsp文件中创建一个可单击的下拉菜单。 我阅读了一些有关使用servlet或ajax的下拉菜单的文章（ 显示来自servlet的数据以下拉菜单jsp ， 单击按钮并从JSP填充数据库中的下拉列表，然后 在JSP / Servlet中 填充 级联下拉列表 ）。

但是，我对servlet或ajax不太了解，因此我重点尝试制作一个简单的，可单击的下拉菜单。

我发现这篇文章很有用，它的解决方案是我想要做的。 因此，我尝试从jsp文件中的帖子中应用解决方案。 文件名是dropdownmenu.jsp。 这是文件的代码（为了最小化内容，已删除了css部分）。

<script type="text/javascript">
/* When the user clicks on the button, 
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}

//for 2nd dropdown
function myFunction2() {
document.getElementById("myDropdown2").classList.toggle("show2");
}

//for 3rd dropdown

function myFunction3() {
document.getElementById("myDropdown3").classList.toggle("show3");
}

// 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');
    }
}
}

if (!event.target.matches('.dropbtn2')) {

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

 if (!event.target.matches('.dropbtn3')) {

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

</script>

<h2>Clickable Dropdown</h2>
<p>Click on the button to open the dropdown menu.</p>

1st dropdown
<div class="dropdown">
<button onclick="javascript:myFunction();" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
</div>
</div>

2nd dropdown
<div class="dropdown2">
<button onclick="javascript:myFunction2();" class="dropbtn2">Dropdown2</button>
<div id="myDropdown2" class="dropdown-content2">
<a href="#home">Home2</a>
<a href="#about">About2</a>
<a href="#contact">Contact2</a>
</div>
</div>

3rd dropdown
<div class="dropdown3">
<button onclick="javascript:myFunction3();" class="dropbtn3">Dropdown3</button>
<div id="myDropdown3" class="dropdown-content3">
<a href="#home">Home3</a>
<a href="#about">About3</a>
<a href="#contact">Contact3</a>
</div>
</div>

我运行它，当我单击按钮时，它将打开下拉菜单，但是当我单击按钮之外时，它不会关闭菜单。 如果单击另一个按钮，它将打开下拉菜单，而上一个菜单仍处于打开状态。 如果单击最后一个按钮，它将打开菜单，但是前两个下拉菜单不会关闭。 当我在这三个按钮之外单击时，三个下拉菜单不会关闭。 我注意到是否需要关闭下拉菜单，我必须单击按钮以关闭。

我对结果感到奇怪，因为在那篇文章中 ，可接受的答案很好用，而我只是使用该代码而无需在jsp文件中进行编辑。 但是，在按钮外部单击时，下拉菜单不会关闭。

我按照这篇文章和这篇文章通过单击按钮调用函数。 所以一些代码已经改变

<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<button onclick="myFunction2()" class="dropbtn2">Dropdown2</button>
<button onclick="myFunction3()" class="dropbtn3">Dropdown3</button>

变成

<button onclick="javascript:myFunction()" class="dropbtn">Dropdown</button>
<button onclick="javascript:myFunction2()" class="dropbtn2">Dropdown2</button>
<button onclick="javascript:myFunction3()" class="dropbtn3">Dropdown3</button>

但是结果是一样的，不确定我犯了哪个错误。

因此，我想知道当鼠标在按钮外部单击时如何关闭下拉菜单吗？ 非常感谢。

Answer 1

Javascript是客户端编程语言，而jsp是服务器端编程语言。

所以window.onclick不会在JSP文件时，您可能会发现在这个JavaScript和JSP的区别后

要在jsp文件中创建可点击的下拉菜单，建议您使用jquery，您可以查看此网站 。

如果您不了解jquery，则jQuery Learning Center和jQuery Tutorial将是了解jquery如何工作的好资源。