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如何工作的好资源。

鼠标在外面单击时，单击下拉菜单不会关闭

1 个答案: