Dölja div vid klick utanför?

[MickeA.com]

Hej

Har följande markup:

html:

<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:

javascript:

$('.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!

[MickeA.com]

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

javascript:

$(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.