Javascript点击/触摸开始并不总是有效

Javascript click / touchstart not always working

本文关键字：有效 开始 点击 触摸 Javascript      更新时间：2023-09-26

我的网站顶部有一个语言选择器，当我点击它时，它应该显示所有语言，当我点击正文时，它应该消失。现在我遇到的问题是，有时它只是完美地工作，但有时它根本不起作用。在我的手机上，它经常不起作用。

这是随机发生的，每次刷新网站都会使其再次工作。

$('.topHeader ul li ul').hide();
$('html').on('click touchstart', function() {
    $('.topHeader ul li ul').hide();
});
$('.topHeader').on('click touchstart', function() {
    event.stopPropagation();
});
$('.topHeader ul li a').on('click touchstart', function() {
    $('.topHeader ul li ul').toggle();
});

Jsfiddle：https://jsfiddle.net/5gcdsjox/

我没有使用引导程序，我只是使用了一些类;)

问题是列表项占据了页面宽度的 100%，并且您没有意识到您正在单击它们而不是html选择器包含的区域。

只需添加这个 css，它就会说明我的意思......

.topHeader ul li ul li {
  background:azure;
}

一个快速的解决方法是，通过单击列表项，您还可以隐藏显示的项目：

$('html').on('click touchstart', function() {
  $('.topHeader ul li ul').hide();
});
// I have added this extra handler
$('.topHeader ul li ul li').on('click touchstart', function() {
  $('.topHeader ul li ul').hide();
});

编辑的jsfiddle：https://jsfiddle.net/0j9h1r2m/1/

相关文章：