當鼠標在外部單擊時，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如何工作的好資源。