Скрыть элемент при клике за его пределами

Опубликовано: 30 Июл 2016

Сегодня мы научимся создавать замечательный блок с неким содержимым, который будет показываться по клику на ссылке и скрываться по клику в любой области страницы.
Для начала создадим обычную html разметку:

<a href="" class="hide">Показать список</a>
<div class="list">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</div>

Наша разметка состоит из ссылки (по которой мы будем нажимать, чтобы отобразить/скрыть блок с данными - <a href="" class="hide"></a>) и блоком данных (который содержит маркированный список с цифорками - <div class="list"></div>). Для лучшего визуального представления зададим некоторые стили:

div {
    display:none;
    border:1px solid;
    width:300px;
}

Здесь мы объявили, что наш блок со списком данных имеет фиксированную ширину - 300px, рамочку - 1px solid и изначально скрыт - display:none;
Теперь перейдем к написанию нашего скрипта. Но перед этим не забываем подключить свежую библиотеку JQuery, так как скрипт будет написан именно на нем. Итак, сам скрипт:

$(document).click( function(event){
    if( $(event.target).closest(".list").length )
    return;
    $(".list").slideUp("slow");
    event.stopPropagation();
});
$('.hide').click( function() {
        $(this).siblings(".list").slideToggle("slow");
        return false;
    });

Скрипт необходимо подключать в конец страницы или после нашего блока, который необходимо скрывать. Если коротко, то скрипт делает следующее: по клику на документе (в любом месте страницы) плавно скрывает блок с классом list - при клике на блоке с классом list ничего не происходит и при клике на ссылке с классом hide - сворачивает и разворачивает блок с классом list - как раз то, что нам и нужно.
Весь код страницы целиком:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<style>
div {
    display:none;
    border:1px solid;
    width:300px;
}
</style>
</head>
<body>
<a href="" class="hide">Показать список</a>
<div class="list">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</div>
<script>
$(document).click( function(event){
    if( $(event.target).closest(".list").length )
    return;
    $(".list").slideUp("slow");
    event.stopPropagation();
});
$('.hide').click( function() {
        $(this).siblings(".list").slideToggle("slow");
        return false;
    });
</script>
</body>
</html>

Комментарии (0)


Оставить комментарий




Разрешённые теги: <b><i><br>Добавить новый комментарий: