Question

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

这种情况随机发生，每次刷新网站都会让它再次运作。

$('.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/

我没有使用bootstrap，我只使用了一些类;）

Answer 1

问题是列表项占据了页面宽度的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/

Javascript点击/ touchstart并不总是有效

1 个答案: