隐藏切换内容，如果用户没有点击特定框内

Question

我有这个代码来切换我的网站上的菜单。它会在点击时打开一个菜单，当您点击另一个时关闭其他人打开，如果您点击外部，则关闭所有菜单。

问题是，我现在正在使用它来显示我的搜索栏，但是如果您在搜索框内单击，它会消失 - woops。是否有可能修改隐藏代码来检测用户是不是点击代码的特定区域内？

// navbar toggle menu 
    $(document).on('click', ".toggle-nav > a", function(event) { 
    event.preventDefault(); 
    event.stopPropagation(); 
    var $toggle = $(this).closest('.toggle-nav').children('.toggle-content'); 
    if ($toggle.hasClass('toggle-active')) 
    { 
     $($toggle).removeClass('toggle-active'); 
    } 
    else 
    { 
     $(".toggle-content").removeClass('toggle-active'); 
     $($toggle).addClass('toggle-active'); 
    } 
    }); 

    // hide the toggle-nav if you click outside of it 
    $(document).on("click", function() 
    { 
     $(".toggle-content").removeClass('toggle-active'); 
    }); 

Answer 1

而不是使用click的，这里采用mouseup。如果目标是，例如#search-bar，则它不会从切换内容元素中删除切换活动。

$(document).mouseup(function(e) { 
     if (!$(e.target).is('#search-bar')) { 
      $(".toggle-content").removeClass('toggle-active'); 
     } 
}); 

你可以看到它的行动jsFiddle。

希望这会有所帮助。