toggleClass在調整瀏覽器窗口大小時觸發兩次

我目前正在創建響應式導航。我已經設法完成並嘗試解決一個問題。每當我嘗試調整瀏覽器大小時，似乎toggleClass似乎會多次觸發。如果刷新瀏覽器，它可以正常工作，但是在調整大小後，它似乎一次點擊就會觸發幾次。toggleClass在調整瀏覽器窗口大小時觸發兩次

這是我一直在努力的代碼。

的jsfiddle - https://jsfiddle.net/kvpyzbxr/1/

<script> 

$(document).ready(function() { 

    function detectMobile() { 
     if ($(window).width() < 1080) { 
      $('header').addClass('mobile'); 
      $('.secondary-navigation').insertAfter('.primary-navigation'); 
     } 

     else { 
      $('header').removeClass('mobile'); 
      $('.secondary-navigation').insertBefore('.primary-navigation'); 
     } 

     $('.navigation li').on('click', function() { 
      console.log('open'); 
      $(this).toggleClass('expand-menu'); 
     }) 
    } 

    detectMobile(); 

    $(window).resize(function() { 
     detectMobile(); 
    }) 


}) 


</script>

header { 
    max-width: 1336px; 
    margin: 0 auto; 
} 

header .navigation { 
    padding: 10px 0; 
    clear: both; 
} 

header .navigation li { 
    padding: 10px; 
    display: inline-block; 
    position: relative; 
    font-family: 'Arial', sans-serif; 
    background-color: #272041; 
    color: #fff; 
    float: left; 
} 

header .navigation li a { 
    color: #fff; 
} 

header .navigation li ul { 
    position: absolute; 
    top: 0; 
    left: 0; 
    padding-top: 30px; 
    display: none; 
} 

header .navigation li ul li { 
    background-color: #231d39; 
    color: #95939e; 
} 

header .navigation li:hover ul { 
    display: block; 
} 

header.mobile .navigation li { 
    display: block; 
    float: none; 
} 

header.mobile .navigation li ul { 
    position: static; 
    display: none; 
    height: 0; 
} 

header.mobile .navigation li.expand-menu ul { 
    height: initial; 
    display: block; 
}

來源

2017-05-07 clestcruz

您可能想要將jQuery添加到您的小提琴中以幫助其他人診斷您的問題。 –

嘗試將調整大小功能放在'$（document）.ready（）'外部 – sideroxylon

那是因爲你幾次添加單擊事件。每次調用detectMobile()時，都會將點擊事件綁定到$('.navigation li')。所以只需移動

$('.navigation li').on('click', function() { 
    console.log('open'); 
    $(this).toggleClass('expand-menu'); 
})

以外的detectMobile()功能。

來源

2017-05-07 11:59:58 Coli

toggleClass在調整瀏覽器窗口大小時觸發兩次

回答

相關問題