隱藏切換內容，如果用戶沒有點擊特定框內

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。

希望這會有所幫助。