当地址栏在页面上可见时，JavaScript代码无法在移动设备上运行？

Question

当地址栏在页面上可见时，我有一个简单的javascript代码（在元素上切换一个类），它不能在移动设备上工作（android chrome）。

代码是一个菜单切换，＆＃34;产品＆＃34;旁边的+按钮。菜单：

好的，所以它不会像这样工作：

但是，只要我向下滚动一点并隐藏移动地址栏 IT WORKS！：

发生了什么事？我很困惑。为什么地址栏可见会改变此代码的工作方式？

这是代码：

m.find( '.menu-dropdown-toggle' ).click(function(e){
            e.preventDefault();
            var $li = $( this ).parents( 'li' ).first();
            if ($li.hasClass( 'toggle-closed' ) || ! ($li.hasClass( 'toggle-open' ) || $li.hasClass( 'current-menu-item' ) || $li.hasClass( 'current_page_ancestor' ) || $li.hasClass( 'current_page_item' ) || $li.hasClass( 'current_page_parent' ))) {
                $li.removeClass( 'toggle-closed' ).addClass( 'toggle-open' );
            } else {
                $li.removeClass( 'toggle-open' ).addClass( 'toggle-closed' );
            }

            return false;
        });

此外，这在其他移动网站上运行良好，特别是这一个具有地址栏可见错误（例如http://beautiful.dtbaker.net/在移动设备上工作正常）。

Answer 1

尝试删除if block

中不需要的条件

if ($li.hasClass( 'toggle-closed' ) || ! ($li.hasClass( 'toggle-open' ) )   { ....}

它会起作用......

Answer 2

该事件被触发两次。第一个触发器是打开菜单，第二个触发器是关闭菜单。这并不能解释为什么地址栏可见时会发生这种情况，但这是一些调试似乎表明的内容。

另一个脚本可能是以编程方式执行的，但我没有调试那么远。

您可以使用去抖动来确保仅在特定时间内触发一次动作，这样可以解决问题，而无需实际解决原因。