Dölja div vid klick utanför?

Hej

Har följande markup:

<div class="PhoneNo">
	<label>Telefon <span class="Mandatory">*</span></label><br />
	<div class="Fields clearfix">
		<div class="CountrySelect"></div>
		<span class="delimiter">+</span>
		<input type="text" id="Phone1" class="Textbox Phone1 CountryCode" />

		<span class="delimiter">-</span>
		<input type="text" class="Textbox Phone1" />

		<span class="delimiter">-</span>
		<input type="text" class="Textbox Phone2" />
	</div>
</div>

När man fokuserar på det första fältet .CountryCode ska diven .CountrySelect visas, samt clonas med innehåll från #CountrySelect och visas. Det här är inga problem:

$('.CountryCode').on('focus', function(){
	var Targ = $(this).parent().find(".CountrySelect");
	$(Targ).html($('#CountryList').html()).show();
});

Men jag får inte till att dölja den igen, som ska ske om man:

1. Väljer något i den selectlista som finns inuti.
2. Klick någonstans utanför diven.
3. Tabb (dvs man går vidare till nästa fält, CountryCode blur).

Tacksam för hjälp!

Löste ett liknade problem såhär:

$(function() {
	$('#Account').on('click', '#AccountBtn > a', function(e){
		e.preventDefault();
		$(this).next('ul').toggleClass("item-opened");
	});
	$(".AccountBox").mouseup(function() {
		return false
	});
	$(document).on('mouseup', function(e) {
		if($(e.target).parent(".AccountBox li").length == 0) {
			$(".AccountBox").removeClass("item-opened");
		}
	});
});

...så gissar att jag kan lösa ovan på liknande sätt.