Закрытие списка по клику вне его зоны действия

[LADYX 90]

Я всех приветствую! Прошу помощи.

Есть выпадающий список:

$(document).ready(function(){

$(".main-mini ul").hide();

$(".main-mini ul li:odd").css("background-color", "#ffffff");

$(".main-mini h3 span").click(function(){

  $(this).parent().next().slideToggle();

if ($(this).text()=="+") {$(this).text("-");} else {$(this).text("+");}

});

});

<div class="main-mini-container">

<div class="main-mini">

<h3>Список<span class="expand">+</span></h3>

<ul>

<li>пункт 1</li>

<li>пункт 2</li>

</ul>

</div>

</div>

Но вот каким образом сделать так, чтобы список закрывался по клику вне его области?

Прошу помощи. Очень благодарен буду за помощь.

[LADYX 90]

Не актуально. Спасибо за помощь.