Закрытие блока при клике вне его

Question

Вот мой неработающий код jQuery. При нажатии на ссылку с классом dropdown-link меню появляется, но не могу реализовать его закрытие при клике в пустое пространство. Прошу вашей помощи.

$(".dropdown-link").click(function () {
    $('.dropdown-content').slideToggle(300);
})
$(document).click(function (e) { 
    if (e.target.classList.contains('.dropdown-link')) {
        console.log('hey');
    }
});

@import url(fonts.css);
/* Base parameters */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.container {
    max-width: 1140px;
    width: 100%;
    padding: 0 15px;
    margin: 0 auto;
}
p,
a,
h1,
h2,
h3,
h4,
h5 {
    color: rgb(235, 235, 235);
    font-family: 'Montserrat-Regular';
    font-weight: 500;
}
a {
    text-decoration: none;
}
a:hover {
    opacity: .8;
}
h1 {
    font-size: 28px;
}
h1:hover a {
    opacity: 1;
}
.button {
    padding: 15px 20px;
    background: #2475e0;
    border-radius: 30px;
}
.button:hover {
    opacity: .8;
}
/* Colors */
.bg-blue {
    background: #2475e0;
}
.bg-black {
    background: #000209;
}
.bg-dark-grey {
    background: #293038;
}
.bg-dark-blue {
    background: #181c29;
}
.bg-light-grey {
    background: #3d4651;
}
.white {
    color: rgb(235, 235, 235);
}
.blue {
    color: #2475e0;
}
/* Paddings and margins */
.p-30 {
    padding: 30px 0;
}
/* Navigation */
#nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
#nav ul {
    list-style: none;
    display: flex;
    align-items: center;
}
#nav ul li {
    margin: 0 3px;
    cursor: pointer;
}
#nav ul a, p {
    padding: 20px 10px;
    color: #9197a0;
}
#nav ul a:hover {
    color: rgb(235, 235, 235);
}
#nav ul a:hover .fa-chevron-down {
    transform: rotate(180deg);
}
.fa-chevron-down {
    transition: 0.5s;
    margin-left: 3px;
}
/* Dropdown menu */
.dropdown-content {
    width: 100%;
    border-radius: 0 0 30px 30px;
    padding: 30px;
    display: none;
}
.dropdown-content div {
    display: flex;
    justify-content: space-around;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body class="bg-black">
    <div class="container">
        <nav class="nav p-30" id="nav">
            <h1><a href="">Title</a></h1>
            <ul>
                <li><a href="">Home</a></li>
                <li><a href="">How to use</a></li>
                <li><a href="">About us</a></li>
                <li><a href="">Link</a></li>
                <li><a href="">Link</a></li>
                <li><p href="" class="dropdown-link">Recommended</p></li>
                <li><a href="">More</a></li>
            </ul>
            <a href="" class="button">Contact us</a>
        </nav>
        <div id="dropdownRec" class="dropdown-content bg-dark-blue">
            <div>
                <a href="#">Link</a>
                <a href="#">Link</a>
                <a href="#">Link</a>
            </div>
        </div>
    </div>
    <script src="javascript/jquery-3.6.1.min.js"></script>
    <script src="javascript/script.js"></script>
</body>
</html>

БЛОГ НА HUSL

Закрытие блока при клике вне его

Ответы (0 шт):