Question

我正在开发一个响应式网站，我希望在屏幕大小和调整大小时反转'li'（菜单）的顺序＆lt; = 800我尝试了这段代码但它随机失败，有时当我调整大小时到＆gt;再次800，不知道为什么，也许是因为它与navBar的动画冲突。

    function mouseEnterAnimation(allowAnimation) {
    if (allowAnimation) {
        $('#upBar, nav ul').stop(true).animate({
            "height" : "60px"
        }, 200);

        $('nav ul li').stop(true).animate({
            "padding-top"    : "20px",
            "padding-bottom" : "20px",
            "height"         : "60px"
        }, 200);

        $('#lang').stop(true).animate({
            "padding-top"    : "23px",
            "padding-bottom" : "23px",
            "height"         : "60px"
        }, 200);

        $('#logo').stop(true).animate({
            "margin-top"  : "15px",
            "margin-left" : "10px"
        }, 200);
    }
}


function mouseLeaveAnimation(allowAnimation) {

    if (allowAnimation) {

        $('#upBar, nav ul').stop(true).animate({
            "height": "45px"
        }, 200, function() {
            $('#upBar, nav ul').removeAttr("style");
        });

        $('nav ul li').stop(true).animate({
            "padding-top"    : "13px",
            "padding-bottom" : "13px",
            "height"         : "45px"
        }, 200, function() {
            $('nav ul li').removeAttr('style');
        });

        $('#lang').stop(true).animate({
            "padding-top"    : "16px",
            "padding-bottom" : "16px", 
            "height"         : "45px"
        }, 200);

        $('#logo').stop(true).animate({
            "margin-top"  : "7px",
            "margin-left" : "10px"
        }, 200, function () {
            $('#logo').removeAttr('style');
        });
    }
}


$(document).ready(function () {

    var $topNav = $('#upBar, nav'),
        allowAnimation = ($(window).width() >= 800);

    $topNav.hover(
        function(){
            mouseEnterAnimation(allowAnimation);
        },
        function() {
            mouseLeaveAnimation(allowAnimation);
        }
    );

    if (!allowAnimation) {
      $("nav ul").append($("li").get().reverse());
    }

    $(window).resize(function() {
        allowAnimation = ($(window).width() >= 800);

        if (allowAnimation) {

              $('nav ul').show();
        }

            else {

              $('nav ul').hide();
              $("nav ul").append($("li").get().reverse());
        }


    });

    $("#btnMobile, #menu").on("click", function(){
    $("nav ul").stop(true).slideToggle();

    });

});

为了更好地理解这个问题我在http://www.iwanttobesanta.com/news.php上有网站，不要担心索引页面，我只是在其他页面上实现了这个。感谢

Answer 1

好的，这有点奇怪。

一旦达到限制值> gt = 800，你就开始在调整大小时执行反向功能，但我们需要记住，每次调整大小时都会调用此函数我的意思是一旦元素在导航栏上列表他们将一次又一次地切换，所以我建议在第一次反向时使用类似标志的东西来跟踪何时反转元素。

另请注意，您移动时附加了<li>元素，这将导致<li>不再在<a>内链接将变得无用。

尝试使用以下内容：

$("nav ul > a,  #lang").each(function(i,li){
    $("nav ul").prepend(li)
})

交换后，其他页面的链接将继续有效。

这只是我所说的使用标志来保持交换状态的建议。

var swapped = false; 
$(window).resize(function(e) {

        allowAnimation = ($(window).width() >= 800);

        if (allowAnimation ) {

              $('nav ul').show();

        }else if(!allowAnimation && !swapped){
              swapped = true;
              $('nav ul').hide();
              $("nav ul > a,  #lang").each(function(i,li){
                  $("nav ul").prepend(li)
              })
        }

        if(swapped && allowAnimation){
           swapped = false;
           $("nav ul > a,  #lang").each(function(i,li){
                  $("nav ul").prepend(li)
              })
        }


    });

其他事情

<meta name="viewport" content="width=width-device, initial-scale=1.0"/>

应该是：

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

我希望这对你有用。

Jquery逆序冲突

1 个答案: