Dölja div vid klick utanför?

MickeA.comMedlem sedan feb. 20034 441 inlägg

Frågan28 maj 2015 03:01#1

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:

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

Tacksam för hjälp!

MickeA.comMedlem sedan feb. 20034 441 inlägg

23 juni 2015 02:45#2

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.