下拉菜单在移动设备上不起作用

Question

下拉菜单在移动设备上不起作用。我在下面粘贴了 HTML 和 JS 代码：

<a href="#" class="dropbtn" onclick="myFunction()">Min profil<span class="caret"></span></a>
<ul class="dropdown-menu" id="myDropdown" style="right: 0 !important; left: auto !important;">
    <li><a href="#" style="display: block; padding: 3px 20px; clear: both; font-weight: 400; line-height: 30px; color: #1facc0; white-space: nowrap; text-decoration: none; font-size: 16px;">Min profil</a></li>
    <li><a href="#" style="display: block; padding: 3px 20px; clear: both; font-weight: 400; line-height: 30px; color: #1facc0; white-space: nowrap; text-decoration: none; font-size: 16px;">Log ud</a></li>
</ul>

这是我的 jQuery 代码：

/* When the user clicks on the button, 
toggle between hiding and showing the dropdown content */
function myFunction() {
    document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown if the user clicks outside of it
window.onclick = function(e) {
    if (!e.target.matches('.dropbtn')) {
         var myDropdown = document.getElementById("myDropdown");
         if (myDropdown.classList.contains('show')) {
              myDropdown.classList.remove('show');
         }
     }
 }