Задать вопрос
@SeeYou1ater
javascript

Как при клике на любой блок, скрыть другие блоки?

<!DOCTYPE html>
<html lang="en">
<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.min.css">
</head>
<body>
    <div class="slider">
        <div class="slider__item">
            <img class="slider__image" src="../images/1.jpg" alt="#">
        </div>
        <div class="slider__item">
            <img class="slider__image" src="../images/2.jpg" alt="#">
        </div>
        <div class="slider__item">
            <img class="slider__image" src="../images/3.jpg" alt="#">
        </div>
        <div class="slider__item">
            <img class="slider__image" src="../images/4.jpg" alt="#">
        </div>
        <div class="slider__item">
            <img class="slider__image" src="../images/5.jpg" alt="#">
        </div>
        <div class="slider__item">
            <img class="slider__image" src="../images/6.jpg" alt="#">
        </div>
        <div class="slider__item">
            <img class="slider__image" src="../images/7.jpg" alt="#">
        </div>
        <div class="slider__item">
            <img class="slider__image" src="../images/8.jpg" alt="#">
        </div>
        <div class="slider__item">
            <img class="slider__image" src="../images/9.jpg" alt="#">
        </div>
    </div>
    <div class="slider-bg">
        <div class="slider__item">
            <img class="slider__image" src="../images/1.jpg" alt="#">
        </div>
        <div class="slider__item">
            <img class="slider__image" src="../images/2.jpg" alt="#">
        </div>
        <div class="slider__item">
            <img class="slider__image" src="../images/3.jpg" alt="#">
        </div>
        <div class="slider__item">
            <img class="slider__image" src="../images/4.jpg" alt="#">
        </div>
        <div class="slider__item">
            <img class="slider__image" src="../images/5.jpg" alt="#">
        </div>
        <div class="slider__item">
            <img class="slider__image" src="../images/6.jpg" alt="#">
        </div>
        <div class="slider__item">
            <img class="slider__image" src="../images/7.jpg" alt="#">
        </div>
        <div class="slider__item">
            <img class="slider__image" src="../images/8.jpg" alt="#">
        </div>
        <div class="slider__item">
            <img class="slider__image" src="../images/9.jpg" alt="#">
        </div>
    </div>
<script src="js/main.min.js"></script>
</body>
</html>


@import "reset.scss";
@import "slick.scss";

body {
    color: #ffffff;
    overflow: hidden;
    background-color: #000000;
}
.slider {
    z-index: 1;
    transform: rotate(15deg);
    top: 10vh;
}
.slider-bg {
    z-index: 0;
    transform: rotate(-15deg);
    top: -85vh;
    opacity: 0.15;
    filter: blur(120px) saturate(10);    
}
.slick-list {
    overflow: visible;
}

.slider__item.opened {
    z-index: 2;
    overflow: visible;
    transform: rotate(-15deg) translateX(-70%) translateY(5%);
    box-shadow: rgb(0 0 0 / .75) 0 0 0 5000px;
}

.slider-bg .slider__item{
    height: 100vh;
}
.slider__item{
    height: 75vh;
    margin: 0 20px;
    overflow: hidden;
    transition: all 0.4s;
}

.slider__image {
    height: 100%;
    width: auto;
    transition: 0.5s;
}


$('.slider').slick({
    arrows: false,
    centerMode: true,
    initialSlide: 0,
    infinite: false,
    slidesToShow: 3.5,
    asNavFor: '.slider-bg',
    focusOnSelect: true,
});

$('.slider-bg').slick({
    arrows: false,
    centerMode: true,
    initialSlide: 0,
    infinite: false,
    slidesToShow: 3.5,
    asNavFor: '.slider',
});

/*$('.slider__item').click(function(){
    if ($(this).hasClass('opened')) {
        $(this).removeClass('opened')
    } else
        $(this).addClass('opened');
});*/

document.querySelectorAll('.slider__item').forEach(item => {
    item.addEventListener('click', event => {
        item.classList.toggle('opened');
    })
})


Пока что при клике на блок он открывается и при открытии других блоков он не закрывается, как можно реализовать закрытие других блоков при открытии любого блока? (В JS совсем недавно)
  • Вопрос задан
  • 123 просмотра
1 комментарий
Подписаться 1 Простой 1 комментарий
Решения вопроса 1
ArturMavlidov
@ArturMavlidov
Решил, код ниже

const sliderItems = document.querySelectorAll(".slider__item");

const removeClasses = () => {
  sliderItems.forEach((item) => {
    item.classList.remove('opened')
  });

}

sliderItems.forEach((item) => {
  item.addEventListener("click", (event) => {
    removeClasses();

    const currentItem = event.target.closest(".slider__item");
    currentItem.classList.add("opened");
  });
});
Ответ написан
7 комментариев
7 комментариев
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Fullstack разработчик JavaScript, php
Дорстрой-36 • Воронеж
от 100 000 до 200 000 ₽
JavaScript FullStack developer
Wanted. • Санкт-Петербург
До 220 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Разработать бэкэнд на Node.js
25 нояб. 2024, в 18:39
30000 руб./за проект
Разработать бэкэнд на Django
25 нояб. 2024, в 18:35
30000 руб./за проект
Перенести сайт на CMS Wordpress c Tilda
25 нояб. 2024, в 18:33
10000 руб./за проект
Ещё заказы