1

我正在使用引导框架，但我的导航有问题。

基本上我的导航有两种不同的导航工作方式。“桌面”方式和“移动”方式。

在“桌面”版本中，当用户单击导航链接时，子菜单将出现在整个屏幕上。这是正常工作的。

我想“移动”版本是您的标准移动导航，只有我的 jQuery 会寻找任何父母，然后在它旁边添加一个 + 按钮。当用户单击“+”时，孩子们将向下切换并显示。这也正常工作。

如果用户出于某种原因从“桌面”切换到“移动”导航（我想检查响应性），当我尝试调整窗口大小并让它们都工作时，问题就出现了。

这是我的 jQuery：

$(".subnav").hide();

    $('.nav-collapse li').each(function(){
        var hasKids = $(this).find('ul').length > 0;
        if(hasKids){
            $(this).children('a')
            .append('<button>+</button>');                     
        }
    });

    function whatnav() {
        if ($(window).width() < 767) {
            $('.nav-collapse li').on('click', 'button', function(e){
                e.preventDefault();
                var plusOrMinus = $.trim($(this).text());

                if(plusOrMinus == '+'){
                    $(this).text('-');
                } else {
                    $(this).text('+');
                }

                $(this).parents('li').find('.subnav').toggle(250);
            });             
        } else {
            $("nav a").click(function () {
                $(this).parent('li').find(".subnav").css("display","table").fadeIn(250);
                event.stopPropagation();
            });
            $(".subnav").click(function() {
                $(this).fadeOut(250);
            });         

        }
    }

    $(document).ready(whatnav);
    $(window).resize(whatnav);

我创建了函数“whatnav”，然后做了一个 IF 语句——如果窗口低于 767px，则使用“移动”导航，否则使用“桌面”导航 jquery。

如果我以“移动”模式开始，然后移至桌面，则一切正常。但是，如果我再改回“移动”窗口宽度，它仍然使用“桌面”jQuery 片段而不是移动的。

我以前从未使用过 IF 语句 - 我做错了吗？任何帮助表示赞赏！

4

2 回答 2

0

存储窗口的初始大小如下：

    var initialSize = $( window ).width();
    $( "body" ).data( "viewportSize", initialSize );

然后您可以使用 进行检查$( window ).width()。不要忘记更新存储的值。

于 2013-11-15T10:20:04.363 回答
0

问题是每次调整窗口大小时，都会whatnav一遍又一遍地调用它来绑定单击事件处理程序。

现在，如果您在移动设备大小的窗口中加载它，它会绑定移动设备事件处理程序。但是，如果您将大小调整为桌面大小，它仍然会将旧处理程序附加到元素上，并将桌面处理程序附加到顶部。如果您从台式机尺寸变为移动尺寸，同样的事情。

我提供的代码并不理想，有一种更简洁的方法来解决您的情况，但是足以说明如何在 jquery 中完成绑定和解除绑定事件:-)

$(document).ready(function(){
    // don't manipulate any element before document is ready!
    $(".subnav").hide();

    $('.nav-collapse li').each(function(){
        var hasKids = $(this).find('ul').length > 0;
        if(hasKids){
            $(this).children('a')
            .append('<button>+</button>');                     
        }
    });
});


function desktopLinkClick(ev) {
    // `ev` is the event object
    // `stopPropagation` prevents the click to be triggered on parent elements
    // you may want to use `preventDefault`, which cancels the click
    ev.stopPropagation();

    $(this).parent('li').find(".subnav").css("display","table").fadeIn(250);
}

function desktopSubnavClick() {
    $(this).fadeOut(250);
}

function mobileButtonClick(ev) {
    ev.preventDefault();
    var plusOrMinus = $.trim($(this).text());

    if(plusOrMinus == '+'){
        $(this).text('-');
    } else {
        $(this).text('+');
    }

    $(this).parents('li').find('.subnav').toggle(250);
}

function rebindClickEvents() {
    if ($(window).width() < 767) {
        // remove previous event handlers
        $("nav a").off('click', desktopLinkClick);
        $(".subnav").off('click', desktopSubnavClick);

        // bind new event handlers
        $('.nav-collapse li button').on('click', mobileButtonClick);
    } else {
        // remove previous event handlers
        $('.nav-collapse li button').off('click', mobileButtonClick);

        // bind new event handlers
        $("nav a").on('click', desktopLinkClick);
        $(".subnav").on('click', desktopSubnavClick);
    }
}

$(document).ready(rebindClickEvents);
$(window).resize(rebindClickEvents);
于 2016-02-01T16:58:48.443 回答