Как менять класс по клику вне блока?

Question

[pashabomber]

Добрый день!

На сайте bnews2.volodin-web.ru в шапке есть блок с выбором валюты:

<div class="money-course">
	<div class="item dollar">
		<div class="content">
			<img src="img/dol.png"> usd
			<span>188,4</span>
		</div>
	</div>
	<div class="sub-course">
		<div class="item euro">
			<div class="content">
				<img src="img/eur.png"> euro
				<span>245,8</span>
			</div>
		</div>
		<div class="item rub">
			<div class="content">
				<img src="img/rub.png"> rur
				<span>245,8</span>
			</div>
		</div>
	</div>
</div>

По клику на доллар появляется блок с классом sub-course, в котором показаны курсы евро и рубля. По клику на доллар блок sub-course закрывается.

JS:

$(document).ready(function(){
		$('.dollar').click(function() {
			$('.sub-course').toggleClass('show');
			$(this).toggleClass('dollar-opened');
		});
	});

Подскажите, пожалуйста, как сделать закрытие по клику в любом месте сайта?

Answer 1

[westdp]

pashabomber вот первая ссылка в гугле тыц или вот так:

$(document).mouseup(function (e){ // событие клика по веб-документу
		var div = $(".dollar");
		if (!div.is(e.target) // если клик был не по нашему блоку
		    && div.has(e.target).length === 0) { // и не по его дочерним элементам
			$('.dollar').removeClass('dollar-opened'); 
                        $('.sub-course').removeClass('show');
		}
	});

Comments

[pashabomber]

спасибо огромное!)

Answer 2

[Дмитрий Ковальский]

При клике на элемент нужно повесить обработчик клика на document. Внутри него проверить $(e.target).closest('#селектор элемента').length == 0, где е - входной параметр обработчика(фактически проверяете элемент по которому кликнули). Если проверка прошла - значит вы кликнули мимо элемента. Соответственно делаем нужные вам действия и отвязываем событие от document.
UPD: truemisha.ru/blog/jquery/klik-vne-elementa.html Держите пример кода.