導航不能正常工作的jQuery調整大小功能

基本上我的導航有兩種不同的導航工作方式。 '桌面'方式和'移動'方式。

在用戶點擊導航鏈接時，「桌面」版本的子菜單將出現在整個屏幕上。這是正確的，因爲它應該。

'移動'版本是我的標準移動導航我想，只有我的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 statment - 如果窗口下方767px然後使用「移動」導航否則使用「桌面」導航jQuery的。

如果我以'移動'模式啓動，然後移動到桌面，它都可以正常工作。但是，如果我再回到「移動」窗口寬度，它仍會使用「桌面」jQuery片段而不是移動窗口。

我從來沒有使用IF語句 - 我做錯了嗎？任何幫助表示讚賞！

來源

2013-11-15 user1788364

商店如下窗口的初始大小：

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

然後你可以用$(window).width()執行你的支票。不要忘記更新存儲的值。

來源

2013-11-15 10:20:04

加布裏埃萊嗨，謝謝你的回覆！我還在學習jQuery的所以請原諒我的無知，但它會是這樣（！）：http://jsfiddle.net/vYWuU/ 我把：如果（INITIALSIZE <767）{ }其他{ } 這是正確的做法嗎？我將如何更新儲值？非常感謝 – user1788364

我試過很多的變化，並讀取數據屬性jQuery的網站，但我真的不知道如何仍更新存儲的值 - 是否有任何的例子在任何地方，我可以看看？ – user1788364

[教程]（http://www.w3schools.com/jquery/misc_data.asp） –

的問題是，每次你調整你的窗口時間，你叫whatnav這一遍又一遍結合的Click事件處理程序。

現在，如果您將其加載到移動大小的窗口中，它將綁定移動事件處理程序。但是，如果您調整桌面大小，仍然會將舊的處理程序附加到這些元素上，並將桌面上的附加程序放在頂部。如果你從桌面大小移動到移動大小，那也是一樣的。

我提供的代碼是不理想的，有解決您的情況更清潔的方式，但它不夠好，以顯示如何綁定和解除綁定事件是在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-01 16:58:48

導航不能正常工作的jQuery調整大小功能

回答

相關問題