手機導航點擊jquery

我有一個功能，當用戶點擊移動導航之外關閉移動菜單。我不認爲我的代碼是正確的，因爲當我點擊它打開並直接關閉的移動菜單時。我想要發生的事情是，當用戶在導航條之外單擊時滑動菜單。手機導航點擊jquery

當前的代碼：

// Responsive menu 
$('.mobile-menu').click(function(e) { 
    e.preventDefault(); 
    $('nav').slideToggle('slow'); 
}); 
// Close out the menu on click outside 
window.addEventListener('mouseup', function(event) { 
    var box = document.getElementById('nav'); 
    if(event.target != box && event.target.parentNode != box) { 
     $('nav').slideToggle('slow'); 
    } 
});

我認爲這是地方與鼠標鬆開做，但是我沒有看到一個鼠標點擊中的可用參數。

感謝

來源

2015-09-25 Jolen

的問題是，當你mousedown上.mobile-menu它顯示了nav，那麼當你mouseup在nav之外的任何內容，包括.mobile-menu，它再次隱藏nav。您應該檢查點擊事件的目標是不是.mobile-menu。嘗試下面的代碼：

// Responsive menu 
$('.mobile-menu').click(function(e) { 
    e.preventDefault(); 
    $('nav').slideToggle('slow'); 
}); 
// Close out the menu on click outside 
$(window).on('mouseup', function(event) { 
    if(!$(event.target).is("nav") && $.contains(event.target, $("nav")) && !$(event.target).is('.mobile-menu')) { 
     $('nav').slideToggle('slow'); 
    } 
});

來源

2015-09-25 09:12:19

無論我點擊它切換的導航下車窗。 – Jolen

@Jolen更新後，立即嘗試。 –

現在，當您在導航欄外單擊時，代碼不會切換 – Jolen

我可以給你一個更清潔的方法來做到這一點。窗口的偵聽器只能在菜單展開後綁定。當它摺疊時，應該刪除監聽器。這將防止由於2個事件偵聽器的異步執行導致的很多麻煩和可能的錯誤。考慮到這一點：

// First we define a callback function to be called after the nav complete showing, which will close the nav when a user tap outside. 
var bindEventListener = function(event) { 
    var box = document.getElementById('nav'); 
    if(event.target != box && event.target.parentNode != box) { 
     $('nav').slideUp('slow', function(){ 
      // remove the window's event listener after the nav is closed 
      window.removeEventListener('mouseup', bindEventListener); 
     }); 
    } 
}); 

// Now we set the button's onclick event and bind the above defined callback for mouseup event. 
$('.mobile-menu').click(function(e) { 
    e.preventDefault(); 
    $('nav').slideDown('slow', function(){ 
     window.addEventListener('mouseup', bindEventListener); 
    }); 
});

來源

2015-09-25 09:26:04 AVAVT

任何地方我在窗口中單擊，都會切換導航欄。 – Jolen

點擊事件的目標不一定是nav或者是第一級的孩子，所以，如果有對nav你會滑開，然後關閉滑動點擊事件。

您需要檢查nav包含目標元素或等於它，因此事件監聽器裏，改變你的條件是：

if(!(event.target == box || $.contains(box, event.target))) { 
    ...

來源

2015-09-25 09:27:31

手機導航點擊jquery

回答

相關問題