I am creating a small project and for the front end I chose to use Material Design BootStrap (with jQuery), since I like those designs more than the standard BootStrap. Until now everything had worked correctly, but I noticed a strange behavior with one element: the drop-down lists. When you click on a list, it is displayed, but then there is no way to close it again, that is, to do the show / hide function when there is a selection, or when you click somewhere. It just stays open. The only way to close it is to refresh the page. This happens to me even on the MDBootstrap page (on my personal computer). (https://mdbootstrap.com/docs/jquery/navigation/navbar/).

Well, some additional data: So far I had done my tests using the latest version of Chrome. I found it strange that such elementary functionality did not work even on the website of its creators. Then I tried Firefox, the same problem. Today in the morning while working, I decided to open the MDBootstrap page on my work computer, and to my surprise the drop-down lists worked correctly! I also did the test on a MacBook with Chrome, entering the same page and it also worked. I even tried from a virtual machine, and in the Chrome of this VM the drop-down lists worked!

In summary, MDBootstrap drop-down lists do not work, so far, in Chrome or Firefox on my personal computer at home. It occurred to me that it could be the extensions of those browsers that were causing some conflict with that element, but I uninstalled and reinstalled both browsers, and the problem persists. I have tried incognito mode with these browsers and it does not work. I tried Internet Explorer and Vivaldi, and in these if the drop-down lists work. Everything is so confusing!

What would be the possible cause of the problem, and how could I solve it?