Question

在UX测试期间，我遇到了一个奇怪的错误。当浏览器视口达到1280px时，它会转换为移动/平板电脑视图。这个过渡的一部分是页面顶部的jQuery驱动的导航栏。

自实施FlexSlider以来，当点击包含FlexSlider的元素时，导航菜单的jQuery代码会激活。

我已经浏览了我的html和CSS代码，但找不到会导致这种现象的任何基本问题。

可以通过查看Nerius UAT并将视口删除到1280px或更低来进行演示。

我遇到了麻烦，我可以将问题消除到一定程度，但不会造成其他负面影响：

    <script type="text/javascript" charset="utf-8"> <!-- Mobile Navigation Control -->
    $(function() {
        var pull = $('#pull');
            menu = $('nav ul');

        $(pull).on('click', function(e) {
            e.preventDefault();
            menu.slideToggle();
        });

        $(window).resize(function(){
            var w = $(this).width();

            if(w > 1280 && menu.is(':hidden')) {
                menu.removeAttr('style');
            }
        });

        $('li').on('click', function(e) {               
            var w = $(window).width();
            if(w < 1280 ) {
                menu.slideToggle();
            }
        });

        $('.panel').height($(window).height());     
    });
</script>

当我在代码中删除宽度阈值并使视口保持在阈值之上，但仍然低于响应式设计的CSS断点时，问题就消失了;但是，根据设置的宽度阈值，菜单激活会变得混乱。

我一般都在学习jQuery和JavaScript，所以下一步的故障排除/解决方案超出了我的技术技能。

我提前道歉，我倾向于在一个大文件中编码，然后将其分解并清理代码。

提前感谢您看一下并帮助我。

Answer 1

这是标签冲突，显然当滑块和菜单都使用UL / LI时，滑块的LI激活菜单。神秘解决了。

jQuery导航/视口错误

1 个答案: