如何關閉這個滑入菜單點擊外部？

我目前正在嘗試使用jQuery的手機網站的東西。我實現了一個非常簡單的滑動菜單，我發現在這裏：http://jsfiddle.net/jm36a13s/如何關閉這個滑入菜單點擊外部？

現在我想要得到它的點擊任何地方，但菜單時關閉。我嘗試了一些我已經找到的建議，但由於某種原因，我無法使其工作。

提前致謝！

$(document).ready(function() { 
    $menuLeft = $('.pushmenu-left'); 
    $nav_list = $('#nav_list'); 

    $nav_list.click(function() { 
     $(this).toggleClass('active'); 
     $('.pushmenu-push').toggleClass('pushmenu-push-toright'); 
     $menuLeft.toggleClass('pushmenu-open'); 
    }); 
});

來源

2015-11-09 Markus Eggetsberger

可能重複登記在整個文檔單擊事件，並隱藏菜單[如何檢測一個元素之外的點擊？（HTTP ：//stackoverflow.com/questions/152975/how-to-detect-a-click-outside-an-element） – AGE

當用戶單擊窗口中的任何位置時，您可以刪除您的類。

然後你就可以阻止事件冒泡DOM樹要麼$pushMenu或$nav_list被點擊時，爲防止上述：

$(document).ready(function() { 
    var $menuLeft = $('.pushmenu-left'), 
     $nav_list = $('#nav_list'), 
     $pushMenu = $('.pushmenu-push'); 

    $nav_list.click(function() { 
     $(this).toggleClass('active'); 
     $pushMenu.toggleClass('pushmenu-push-toright'); 
     $menuLeft.toggleClass('pushmenu-open'); 
    }).add($menuLeft).click(function (e) { 
     e.stopPropagation(); 
    }); 

    $(window).click(function() { 
     $nav_list.removeClass('active'); 
     $pushMenu.removeClass('pushmenu-push-toright'); 
     $menuLeft.removeClass('pushmenu-open'); 
    }); 
});

JSFiddle

來源

2015-11-09 20:33:28 George

如果你點擊「滑出式導航」的文字或帶class =「內容」一節中這是行不通的 – DinoMyte

@DinoMyte謝謝，修正。 – George

這工作得很好！非常感謝！ :) –

你也可以嘗試以下。整個想法是，如果target_id不"nav_list"

$(document).click(function(e) 
     { 
      if(e.target.id != "nav_list") 
      { 
      $nav_list.removeClass('active'); 
      $pushMenu.removeClass('pushmenu-push-toright'); 
      $menuLeft.removeClass('pushmenu-open'); 
      } 
     });

http://jsfiddle.net/jm36a13s/23/

的

來源

2015-11-09 20:55:04 DinoMyte

如何關閉這個滑入菜單點擊外部？

回答

相關問題