Question

$(function closeMenu() {
	$('.list-item').removeClass('activeItem');
	$('.showSubMenu').removeClass('showSubMenu');
	$('input[type=checkbox]').prop('checked', false);
	$('#burger').removeClass('change');
	});

$('html').on('click', function(e) {
	     closeMenu(); 
	});

	$('.list-item, .showSubMenu, #burger, #menuToggle').click( function(e) {
	    e.stopPropagation();
	});

这个JS在Chrome（桌面和移动设备）和Safari（仅限桌面）的外部点击工作并关闭响应式菜单，但不支持Firefox！??怎么了？语法错误？任何智慧都非常感激。

请参阅此处的完整代码:(在Chrome和Safari桌面中工作）： http://cardscreative.com/cc2017/test444.html

Answer 1

看起来body只占用了搜索栏在Mozilla中的部分，因此如果您点击其他任何地方，它就不会注册为点击了body。如果您将body设置为height: 100%，它似乎可以正常工作。

Answer 2

试试这个

$(document).on('click','body *',function(){
         closeMenu(); 
});

Answer 3

查看您发布的示例网站的JavaScript（http://cardscreative.com/cc2017/test444.js），其中包含以下代码：

$(document.body).on('click', function(e) { ... }

对于Firefox，文档正文仅占用其内容的整个高度，而不是窗口的整个高度。因此，此功能不会附加到在内容<body>之外发生的点击事件。在示例站点中，内容正文由导航栏组成。

可以通过以下更改修复此问题：

$(document).on('click', ...

此更改会将功能附加到文档中的所有点击，而不仅仅是正文。

（另外，您的问题是$('html').on('click', ...。您应该更新您的问题以反映网站的JavaScript。）

外部点击关闭菜单仅在Firefox中不起作用？

3 个答案: