jQuery的 - 隱藏一個div菜單點擊外DIV

Question

後，我已經建立在一個下拉菜單：

http://www.ourbridalsongs.com/new_header/header.php

當您單擊向上/向下箭頭旁邊的標誌 - 出現的菜單 - 我想在點擊屏幕上的任何其他位置時使其消失 - 出於某種原因，它會卡住，並且不會滑回。

任何人都可以幫助解決這個問題！

這裏是我的腳本：

$(document).ready(function() { 

    $("ul.subnav").parent().append("<span></span>"); 
    $("ul.topnav li span").click(function() { 
     $(this).parent().find("ul.subnav").slideDown('slow').show(); 
     $(this).parent().click(function() {}, function() { 
      $(this).parent().find("ul.subnav").slideUp('slow'); 
     }); 
    }).hover(function() { 
     $(this).addClass("subhover"); 
    }, function() { 
     $(this).removeClass("subhover"); 
    }); 

}); 

謝謝！

Answer 1

在代碼中添加此片段

$(document).click(function(e){ 
    var myTarget = $(".subnav"); 
    var clicked = e.target.className; 
    if($.trim(myTarget) != '') { 
     if($("." + myTarget) != clicked) { 
      $("ul.subnav").slideUp('slow').hide(); 
     } 
    } 
}); 

這將關閉您的ul.subnav當您單擊文檔中的任意位置。

Answer 2

這很簡單：將隱藏該菜單的函數綁定到除該菜單外的所有內容。要做到這一點綁定點擊聽衆body元素，因爲它無處不在，也綁定點擊聽衆菜單 - 最後一個應該只是防止執行第一個。

$("body").click(function() { 
    $("#services-container-id").hide(); 
}); 

$("#services-container-id").click(function(e) { 
    e.stopPropagation(); 
});