JQuery: как удалитьClass на клик вне элемента?

Question

Этот скрипт запускает мое раскрывающееся меню, переключая классы .open и .close при нажатии. Как закрыть это раскрывающееся меню, когда пользователь щелкает за пределами меню?

<script> 
    $(document).ready(function(){ 
     $("li").addClass("closed"); 
     $("li.sel").on("click",function(e){ 
      e.preventDefault() 
      }); 
     $("#navi1 li").click(function(){ 
      $("#navi1 li").toggleClass("open"); 
      }); 
     }); 
</script> 

Answer 1

Вы пробовали

$("yourNavMenu").blur(function(){ 
    // Add your close class 
}); 

Answer 2

Что-то, как это должно работать:

$('*').not('#navi li').click(function(){ 
    $('#navi li').hide(); 
}); 

Answer 3

Вот как я это сделал. По сути, вам нужно вызвать функцию при любом событии клика, а для каждого меню, если событие не происходит в этом меню или один из дочерних элементов меню, вызывается функция закрытия меню. Конечно, ваша функция закрытия изменит атрибут класса вместо использования функций fade jQuery. Как вы можете видеть, у меня есть несколько меню под названием «подписаться», «обо мне», «об этом сайте» и т. Д. Надеюсь, это поможет.

$(document).ready(function(){ 

    // menu hide/show logic 
    var TOGGLE_SPEED = 100; 

    var subscribe_menu = $("#subscribe-container"); 
    var about_me = $("#about-me-container"); 
    var about_this_website = $("#about-this-website-container"); 
    var filter_menu = $("#filter-menu-container"); 
    var img_menu = $("#img-menu-container"); 

    var menuList = [subscribe_menu, about_me, about_this_website, filter_menu, img_menu]; 

    function hideMenu(menu){ 
     menu.fadeOut(TOGGLE_SPEED); 
    } 

    function showMenu(menu){ 
     menu.fadeIn(TOGGLE_SPEED); 
    } 

    function toggleMenu(menu){ 
     menu.fadeToggle(TOGGLE_SPEED); 
    } 

    function hideOthers(e){ 
     for (var i in menuList) { 
      var menu = menuList[i]; 
      // check to see if the event target is the menu 
      // or one of its children 
      if (!menu.is(e.target) && menu.has(e.target).length === 0) { hideMenu(menu); } 
     }; 
    } 

    function clickHandler(menu){ 
     var e = $.Event("click"); 
     e.target = menu; 
     hideOthers(e); 
     toggleMenu(menu); 
    } 

    $(document).click(function(e){ 
     hideOthers(e); 
    }); 

    $("#subscribe-tab").click(function(){ 
     clickHandler(subscribe_menu); 
     return false; 
    }); 

    $("#about-me-tab").click(function(){ 
     clickHandler(about_me); 
     return false; 
    }); 

    $("#about-this-website-tab").click(function(){ 
     clickHandler(about_this_website); 
     return false; 
    }); 

    $("#filter-tab").click(function(){ 
     clickHandler(filter_menu); 
     return false; 
    }); 

    $("#img-menu-button").click(function(){ 
     clickHandler(img_menu); 
     return false; 
    }); 

});