Clickable dropdown menu does not close when the mouse click outside

Question

(Please note if this question is not appropriate to post here, please remove it. Thanks)

I am learning jsp and try to make a clickable dropdown menu in the jsp file. I read some posts about dropdown menu using servlet or ajax( display data from servlet to drop down menu jsp , JSP populate dropdown list from database on button click and Populating cascading dropdown lists in JSP/Servlet ).

However I don't know too much about servlet or ajax so I focus to try to make a simple, clickable dropdown menu.

I find this post is useful, its solution is what I am trying to do. So I try to apply the solution from that post in the jsp file. The file name is dropdownmenu.jsp. Here is the code of the file (css part has been removed in order to minimize the content).

<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>

I run it, when I click the button, it will open the dropdown menu, however when I click outside of the button, it does not close the menu. If I click the other button, it opens the dropdown menu and the previous menu still open. If I click the last button and it opens the menu but the previous two dropdown menus do not close. When I click outside of those three buttons, three dropdown menus do not close. I notice if I need to close the dropdown menu, I have to click the button to close.

I feel strange about the result because in that post , the accepted answer works fine and I just use that code without edit in the jsp file. But the dropdown menu do not close when click outside of the button.

I follow this post and this post to call a function from a button click. So some code has been changed

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

changed to

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

However the result is the same, not sure which part I made the mistake.

So I would wonder to know how to close the dropdown menu when the mouse click outside the button? Thanks a lot.

Answer 1

Javascript is client side programming language and jsp is server side programming language.

So window.onclick will not work in jsp file, you may find the difference between javascript and jsp in this post

To make a clickable dropdown menu in a jsp file, I suggest to use jquery and you may have a look at this website .

If you don't know about jquery, jQuery Learning Center and jQuery Tutorial would be a good resource to understand how jquery works.