触摸启动和悬停时出现下拉菜单问题

Question

我试图使下拉菜单仅在笔记本电脑屏幕上悬停在其上方时显示，并且仅在移动设备上单击时显示。问题是，当它在笔记本电脑大小的屏幕上点击时，它也会出现，边缘也很乱。另一个问题是，当我在手机上时，我必须不断按下屏幕才能显示。下面是我写的网页链接以及Javascript代码和HTML。

https://dreamy-brigadeiros-09ff46.netlify.app/

Javascript

const dropdown = document.querySelector('.dropdown');
const dropdownToggle = document.querySelector('.dropdown .dropdown-toggle');
const dropdownMenu = document.querySelector('.dropdown .dropdown-menu');
var mq = window.matchMedia('(max-width: 900px)');
var flagSm = false;

if (mq.matches) {
if (!flagSm) {
dropdown.addEventListener('touchstart', function () {
dropdownToggle.classList.add("show");
dropdownMenu.classList.add("show");
});
flagSm = true;
} else {
dropdown.addEventListener('touchcancel', function () {
dropdownToggle.classList.remove("show");
dropdownMenu.classList.remove("show");
});
flagSm = false;
}
} else {
dropdown.addEventListener('mouseover', function () {
dropdownToggle.classList.add("show");
dropdownMenu.classList.add("show");
});
dropdown.addEventListener('mouseout', function () {
dropdownToggle.classList.remove("show");
dropdownMenu.classList.remove("show");
});
}

HTML

<div class="container-fluid top-menu">
<nav class="navbar navbar-expand-lg navbar-dark topnav">
<a class="navbar-brand topnav-logo" href=""><img class="topnav-logo-img" src="./images/shop/pyrosvesi.png"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggler"
aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarToggler">
<ul class="navbar-nav ms-auto menu-items">
<li class="nav-item"><a class="nav-link" href="">Αρχική</a></li>
<li class="nav-item"><a class="nav-link" href="">Το Κατάστημα</a></li>
<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="" id="navbarDropdown"
role="button" data-bs-toggle="dropdown" aria-expanded="false">Προϊόντα</a>
<ul id="navbarDropdownContent" class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Πυροσβεστικός εξοπλισμός</a></li>
<li><a class="dropdown-item" href="#">Συστήματα πυρανίχνευσης-πυρόσβεσης</a></li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="">Υπηρεσίες</a></li>
<li class="nav-item"><a class="nav-link" href="">Επικοινωνία</a></li>
</ul>
</div>
</nav>
</div>
</section>

Answer 1

试试这样的东西：

if (isTouchDevice()) {
if (!flagSm) {
dropdown.addEventListener('touchstart', function () {
dropdownToggle.classList.add("show");
dropdownMenu.classList.add("show");
});
flagSm = true;
} else {
dropdown.addEventListener('touchcancel', function () {
dropdownToggle.classList.remove("show");
dropdownMenu.classList.remove("show");
});
flagSm = false;
}
} else {
dropdown.addEventListener('mouseover', function () {
dropdownToggle.classList.add("show");
dropdownMenu.classList.add("show");
});
dropdown.addEventListener('mouseout', function () {
dropdownToggle.classList.remove("show");
dropdownMenu.classList.remove("show");
});
}
/**SET THIS FUNCTION SOMEWHERE OUT OF SCOPE**/
function isTouchDevice(){
try{
const device = document.createEvent('TouchEvent');
return true;
}catch(e){
return false;
}
}

使用设备的大小来确定它是否是移动设备不是一个好主意，所以我建议收到设备的承诺，确定它是否允许触摸事件。