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

Question

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

我正在学习jsp并尝试在jsp文件中制作一个可点击的下拉菜单。我阅读了一些关于使用 servlet 或 ajax（display data from servlet to drop down menu jsp、JSP populate dropdown list from database on button click 和 Populating cascading dropdown lists in JSP/Servlet）的下拉菜单的帖子。

但是我对 servlet 或 ajax 不太了解，所以我专注于尝试制作一个简单、可点击的下拉菜单。

我发现这个post 很有用，它的解决方案就是我想要做的。因此，我尝试在 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>

我运行它，当我单击按钮时，它会打开下拉菜单，但是当我单击按钮外部时，它不会关闭菜单。如果我单击另一个按钮，它会打开下拉菜单，并且之前的菜单仍然打开。如果我单击最后一个按钮并打开菜单，但前两个下拉菜单不会关闭。当我在这三个按钮之外单击时，三个下拉菜单不会关闭。我注意到如果我需要关闭下拉菜单，我必须单击按钮才能关闭。

我对结果感到奇怪，因为在 post 中，接受的答案工作正常，我只是使用该代码而不在 jsp 文件中进行编辑。但是在按钮外部单击时，下拉菜单不会关闭。

我按照这个post 和这个post 通过单击按钮调用函数。所以修改了一些代码

<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文件中不起作用，你可以在post找到javascript和jsp的区别

要在 jsp 文件中制作可点击的下拉菜单，我建议使用 jquery，您可以看看这个website。

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