Не убирается класс .active
149
07 марта 2022, 06:20
Что я делаю не так? Хочу убрать класс .active при повторном клике, а он заново добавляется.
window.addEventListener('load', () => {
let accordeon = document.querySelector('.accordeon');
let accordeon__item = accordeon.querySelectorAll('.accordeon__item');
let accordeon__item__title = accordeon.querySelectorAll('.accordeon__item__title');
let accordeon__child__item = accordeon.querySelectorAll('.accordeon__child__item');
let accordeon__child__item__title = accordeon.querySelectorAll('.accordeon__child__item__title');
let accordeon__child__group = accordeon.querySelectorAll('.accordeon__child__group');
let accordeon__grandchild__group = accordeon.querySelectorAll('.accordeon__grandchild__group');
accordeon__child__item__title.forEach((item, i, array) => {
item.addEventListener('mouseover', () => {
if (!item.offsetParent.offsetParent.offsetParent.classList.contains('active')) {
return;
}
item.offsetParent.classList.add('active');
});
accordeon__grandchild__group[i].addEventListener('mouseover', () => {
item.offsetParent.classList.add('active');
});
item.offsetParent.addEventListener('mouseout', () => {
item.offsetParent.classList.remove('active');
});
});
accordeon__item__title.forEach((item, i, array) => {
let height = accordeon__child__group[i].offsetHeight;
accordeon__child__group[i].style.height = 0 + 'px';
item.addEventListener('click', () => { // Клик по меню
for (let j = 0; j < accordeon__item.length; j++) {
item.offsetParent.style.transition = 'height 0.3s linear, opacity 0.05s linear';
accordeon__child__group[j].style.height = 0 + 'px';
accordeon__child__group[j].style.opacity = '0';
if (j == i) {
continue;
}
item.offsetParent.classList.remove('active');
} // Обнуляю все элемы по высоте и прозрачности
for (let j = 0; j < accordeon__child__item.length; j++) {
accordeon__child__item[j].style.cursor = 'default';
} // обнуляю все курсоры
if (!item.offsetParent.classList.contains('active')) {
item.offsetParent.style.transition = 'height 0.3s linear, opacity 0.3s linear';
accordeon__child__group[i].style.height = height + 'px';
accordeon__child__group[i].style.opacity = '1';
item.offsetParent.classList.add('active');
} else {
item.offsetParent.style.transition = 'height 0.3s linear, opacity 0.05s linear';
accordeon__child__group[i].style.height = 0 + 'px';
accordeon__child__group[i].style.opacity = '0';
item.offsetParent.classList.remove('active');
}
for (let j = 0; j < item.nextElementSibling.children.length; j++) {
if (item.offsetParent.classList.contains('active')) {
// при клике все элементам .accordeon__child__item задаётся cursor pointer или
// default, в зависимости от наличия класса active у .accordeon__item
item.nextElementSibling.children[j].style.cursor = 'pointer';
} else {
item.nextElementSibling.children[j].style.cursor = 'default';
}
}
}); // Клик по меню
});
});@import url('https://fonts.googleapis.com/css?family=Lato:400,700|Open+Sans:400,600,700|Raleway:400,900&display=swap');
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
margin: 0;
font-size: 16px;
font-family: 'Open Sans', sans-serif;
}
.accordeon {
max-width: 250px;
color: white;
margin: 0 auto;
}
.accordeon__item {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
position: relative;
transition: transform .5s linear;
transform: scale(1);
}
.accordeon__item__title {
padding: 10px;
background-color: #3b7ba7;
cursor: pointer;
}
.accordeon__item:not(:last-child) {
margin-bottom: 20px;
}
.accordeon__child__group {
position: relative;
transition: height .3s linear, opacity .3s linear;
opacity: 0;
}
.accordeon__child__item {
position: relative;
}
.accordeon__child__item__title {
padding: 5px 10px;
background-color: #b1cfe3;
transition: background-color .2s linear;
}
.accordeon__child__item.active .accordeon__child__item__title {
background-color: #7fb5d8;
}
.accordeon__grandchild__group {
background-color: orange;
position: absolute;
left: 100%;
top: 0;
width: 100%;
transform-origin: top left;
transform: scaleX(0);
transition: transform .2s linear;
}
.accordeon__child__item.active .accordeon__grandchild__group {
transform: scaleX(1);
}
.accordeon__grandchild__item {
padding: 5px 10px;
}<div class="accordeon">
<div class="accordeon__item">
<div class="accordeon__item__title">
Строительство домов
</div>
<div class="accordeon__child__group">
<div class="accordeon__child__item">
<div class="accordeon__child__item__title">
Cтроительство кирпичных домов
</div>
<div class="accordeon__grandchild__group">
<div class="accordeon__grandchild__item">Текст 1</div>
<div class="accordeon__grandchild__item">Текст2</div>
<div class="accordeon__grandchild__item">Так много</div>
<div class="accordeon__grandchild__item">Выпадающих меню</div>
<div class="accordeon__grandchild__item">Куда тебе?</div>
</div>
<!-- .accordeon__grandchild__group -->
</div>
<!-- .accordeon__child__item -->
<div class="accordeon__child__item">
<div class="accordeon__child__item__title">
Cтроительство кирпичных домов
</div>
<div class="accordeon__grandchild__group">
<div class="accordeon__grandchild__item">Текст 1</div>
<div class="accordeon__grandchild__item">Текст2</div>
<div class="accordeon__grandchild__item">Так много</div>
<div class="accordeon__grandchild__item">Выпадающих меню</div>
<div class="accordeon__grandchild__item">Куда тебе?</div>
</div>
<!-- .accordeon__grandchild__group -->
</div>
<!-- .accordeon__child__item -->
<div class="accordeon__child__item">
<div class="accordeon__child__item__title">
Cтроительство кирпичных домов
</div>
<div class="accordeon__grandchild__group">
<div class="accordeon__grandchild__item">Текст 1</div>
<div class="accordeon__grandchild__item">Текст2</div>
<div class="accordeon__grandchild__item">Так много</div>
<div class="accordeon__grandchild__item">Выпадающих меню</div>
<div class="accordeon__grandchild__item">Куда тебе?</div>
</div>
<!-- .accordeon__grandchild__group -->
</div>
<!-- .accordeon__child__item -->
<div class="accordeon__child__item">
<div class="accordeon__child__item__title">
Cтроительство кирпичных домов
</div>
<div class="accordeon__grandchild__group">
<div class="accordeon__grandchild__item">Текст 1</div>
<div class="accordeon__grandchild__item">Текст2</div>
<div class="accordeon__grandchild__item">Так много</div>
<div class="accordeon__grandchild__item">Выпадающих меню</div>
<div class="accordeon__grandchild__item">Куда тебе?</div>
</div>
<!-- .accordeon__grandchild__group -->
</div>
<!-- .accordeon__child__item -->
</div>
<!-- .accordeon__child__group -->
</div>
<!-- .accordeon__item -->
<div class="accordeon__item">
<div class="accordeon__item__title">
Строительство домов
</div>
<div class="accordeon__child__group">
<div class="accordeon__child__item">
<div class="accordeon__child__item__title">
Cтроительство кирпичных домов
</div>
<div class="accordeon__grandchild__group">
<div class="accordeon__grandchild__item">Текст 1</div>
<div class="accordeon__grandchild__item">Текст2</div>
<div class="accordeon__grandchild__item">Так много</div>
<div class="accordeon__grandchild__item">Выпадающих меню</div>
<div class="accordeon__grandchild__item">Куда тебе?</div>
</div>
<!-- .accordeon__grandchild__group -->
</div>
<!-- .accordeon__child__item -->
<div class="accordeon__child__item">
<div class="accordeon__child__item__title">
Cтроительство кирпичных домов
</div>
<div class="accordeon__grandchild__group">
<div class="accordeon__grandchild__item">Текст 1</div>
<div class="accordeon__grandchild__item">Текст2</div>
<div class="accordeon__grandchild__item">Так много</div>
<div class="accordeon__grandchild__item">Выпадающих меню</div>
<div class="accordeon__grandchild__item">Куда тебе?</div>
</div>
<!-- .accordeon__grandchild__group -->
</div>
<!-- .accordeon__child__item -->
<div class="accordeon__child__item">
<div class="accordeon__child__item__title">
Cтроительство кирпичных домов
</div>
<div class="accordeon__grandchild__group">
<div class="accordeon__grandchild__item">Текст 1</div>
<div class="accordeon__grandchild__item">Текст2</div>
<div class="accordeon__grandchild__item">Так много</div>
<div class="accordeon__grandchild__item">Выпадающих меню</div>
<div class="accordeon__grandchild__item">Куда тебе?</div>
</div>
<!-- .accordeon__grandchild__group -->
</div>
<!-- .accordeon__child__item -->
<div class="accordeon__child__item">
<div class="accordeon__child__item__title">
Cтроительство кирпичных домов
</div>
<div class="accordeon__grandchild__group">
<div class="accordeon__grandchild__item">Текст</div>
<div class="accordeon__grandchild__item">Текст1</div>
<div class="accordeon__grandchild__item">Так много</div>
<div class="accordeon__grandchild__item">Выпадающих меню</div>
<div class="accordeon__grandchild__item">Куда тебе?</div>
</div>
<!-- .accordeon__grandchild__group -->
</div>
<!-- .accordeon__child__item -->
</div>
<!-- .accordeon__child__group -->
</div>
<!-- .accordeon__item -->
<div class="accordeon__item">
<div class="accordeon__item__title">
Строительство домов
</div>
<div class="accordeon__child__group">
<div class="accordeon__child__item">
<div class="accordeon__child__item__title">
Cтроительство кирпичных домов
</div>
<div class="accordeon__grandchild__group">
<div class="accordeon__grandchild__item">Текст 1</div>
<div class="accordeon__grandchild__item">Текст2</div>
<div class="accordeon__grandchild__item">Так много</div>
<div class="accordeon__grandchild__item">Выпадающих меню</div>
<div class="accordeon__grandchild__item">Куда тебе?</div>
</div>
<!-- .accordeon__grandchild__group -->
</div>
<!-- .accordeon__child__item -->
<div class="accordeon__child__item">
<div class="accordeon__child__item__title">
Cтроительство кирпичных домов
</div>
<div class="accordeon__grandchild__group">
<div class="accordeon__grandchild__item">Текст 1</div>
<div class="accordeon__grandchild__item">Текст2</div>
<div class="accordeon__grandchild__item">Так много</div>
<div class="accordeon__grandchild__item">Выпадающих меню</div>
<div class="accordeon__grandchild__item">Куда тебе?</div>
</div>
<!-- .accordeon__grandchild__group -->
</div>
<!-- .accordeon__child__item -->
<div class="accordeon__child__item">
<div class="accordeon__child__item__title">
Cтроительство кирпичных домов
</div>
<div class="accordeon__grandchild__group">
<div class="accordeon__grandchild__item">Текст 1</div>
<div class="accordeon__grandchild__item">Текст2</div>
<div class="accordeon__grandchild__item">Так много</div>
<div class="accordeon__grandchild__item">Выпадающих меню</div>
<div class="accordeon__grandchild__item">Куда тебе?</div>
</div>
<!-- .accordeon__grandchild__group -->
</div>
<!-- .accordeon__child__item -->
<div class="accordeon__child__item">
<div class="accordeon__child__item__title">
Cтроительство кирпичных домов
</div>
<div class="accordeon__grandchild__group">
<div class="accordeon__grandchild__item">Текст 1</div>
<div class="accordeon__grandchild__item">Текст2</div>
<div class="accordeon__grandchild__item">Так много</div>
<div class="accordeon__grandchild__item">Выпадающих меню</div>
<div class="accordeon__grandchild__item">Куда тебе?</div>
</div>
<!-- .accordeon__grandchild__group -->
</div>
<!-- .accordeon__child__item -->
</div>
<!-- .accordeon__child__group -->
</div>
<!-- .accordeon__item -->
</div>
<!-- .accordeon -->Answer 1
Я при клике, по задумке, убирал у всех элементов классы active, кроме того, на которого кликнули. Но я неправильно выбрал, как убирать у всех элементов классы.
У меня было так, я убирал класс у того же родительского элемента несколько раз:
item.offsetParent.classList.remove('active');
А надо было проходиться по item'ам
accordeon__item[j].classList.remove('active');
window.addEventListener('load', () => {
let accordeon = document.querySelector('.accordeon');
let accordeon__item = accordeon.querySelectorAll('.accordeon__item');
let accordeon__item__title = accordeon.querySelectorAll('.accordeon__item__title');
let accordeon__child__item = accordeon.querySelectorAll('.accordeon__child__item');
let accordeon__child__item__title = accordeon.querySelectorAll('.accordeon__child__item__title');
let accordeon__child__group = accordeon.querySelectorAll('.accordeon__child__group');
let accordeon__grandchild__group = accordeon.querySelectorAll('.accordeon__grandchild__group');
accordeon__child__item__title.forEach((item, i, array) => {
item.addEventListener('mouseover', () => {
if (!item.offsetParent.offsetParent.offsetParent.classList.contains('active')) {
return;
}
item.offsetParent.classList.add('active');
});
accordeon__grandchild__group[i].addEventListener('mouseover', () => {
item.offsetParent.classList.add('active');
});
item.offsetParent.addEventListener('mouseout', () => {
item.offsetParent.classList.remove('active');
});
});
accordeon__item__title.forEach((item, i, array) => {
let height = accordeon__child__group[i].offsetHeight;
accordeon__child__group[i].style.height = 0 + 'px';
item.addEventListener('click', () => { // Клик по меню
for (let j = 0; j < accordeon__item.length; j++) {
accordeon__item[j].style.transition = 'height 0.3s linear, opacity 0.05s linear';
accordeon__child__group[j].style.height = 0 + 'px';
accordeon__child__group[j].style.opacity = '0';
if (j == i) {
continue;
}
accordeon__item[j].classList.remove('active');
} // Обнуляю все элемы по высоте и прозрачности
for (let j = 0; j < accordeon__child__item.length; j++) {
accordeon__child__item[j].style.cursor = 'default';
} // обнуляю все курсоры
if (item.offsetParent.classList.contains('active')) {
item.offsetParent.style.transition = 'height 0.3s linear, opacity 0.05s linear';
accordeon__child__group[i].style.height = 0 + 'px';
accordeon__child__group[i].style.opacity = '0';
item.offsetParent.classList.remove('active');
} else {
item.offsetParent.style.transition = 'height 0.3s linear, opacity 0.3s linear';
accordeon__child__group[i].style.height = height + 'px';
accordeon__child__group[i].style.opacity = '1';
item.offsetParent.classList.add('active');
}
for (let j = 0; j < item.nextElementSibling.children.length; j++) {
if (item.offsetParent.classList.contains('active')) {
// при клике все элементам .accordeon__child__item задаётся cursor pointer или
// default, в зависимости от наличия класса active у .accordeon__item
item.nextElementSibling.children[j].style.cursor = 'pointer';
} else {
item.nextElementSibling.children[j].style.cursor = 'default';
}
}
}); // Клик по меню
});
});@import url('https://fonts.googleapis.com/css?family=Lato:400,700|Open+Sans:400,600,700|Raleway:400,900&display=swap');
/*
font-family: 'Raleway', sans-serif;
font-family: 'Open Sans', sans-serif;
font-family: 'Lato', sans-serif;
*/
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
margin: 0;
font-size: 16px;
font-family: 'Open Sans', sans-serif;
}
.accordeon {
max-width: 250px;
color: white;
margin: 0 auto;
}
.accordeon__item {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
position: relative;
transition: transform .5s linear;
transform: scale(1);
}
.accordeon__item__title {
padding: 10px;
background-color: #3b7ba7;
cursor: pointer;
}
.accordeon__item:not(:last-child) {
margin-bottom: 20px;
}
.accordeon__child__group {
position: relative;
transition: height .3s linear,
opacity .3s linear;
opacity: 0;
}
.accordeon__child__item {
position: relative;
}
.accordeon__child__item__title {
padding: 5px 10px;
background-color: #b1cfe3;
transition: background-color .2s linear;
}
.accordeon__child__item.active .accordeon__child__item__title {
background-color: #7fb5d8;
}
.accordeon__grandchild__group {
background-color: orange;
position: absolute;
left: 100%;
top: 0;
width: 100%;
transform-origin: top left;
transform: scaleX(0);
transition: transform .2s linear;
}
.accordeon__child__item.active .accordeon__grandchild__group{
transform: scaleX(1);
}
.accordeon__grandchild__item {
padding: 5px 10px;
}<div class="accordeon">
<div class="accordeon__item">
<div class="accordeon__item__title">
Строительство домов
</div>
<div class="accordeon__child__group">
<div class="accordeon__child__item">
<div class="accordeon__child__item__title">
Cтроительство кирпичных домов
</div>
<div class="accordeon__grandchild__group">
<div class="accordeon__grandchild__item">Текст</div>
<div class="accordeon__grandchild__item">Текст1</div>
<div class="accordeon__grandchild__item">Текст2</div>
<div class="accordeon__grandchild__item">Текст3</div>
<div class="accordeon__grandchild__item">Текст4</div>
</div> <!-- .accordeon__grandchild__group -->
</div> <!-- .accordeon__child__item -->
<div class="accordeon__child__item">
<div class="accordeon__child__item__title">
Cтроительство кирпичных домов
</div>
<div class="accordeon__grandchild__group">
<div class="accordeon__grandchild__item">Текст</div>
<div class="accordeon__grandchild__item">Текст1</div>
<div class="accordeon__grandchild__item">Текст2</div>
<div class="accordeon__grandchild__item">Текст3</div>
<div class="accordeon__grandchild__item">Текст4</div>
</div> <!-- .accordeon__grandchild__group -->
</div> <!-- .accordeon__child__item -->
<div class="accordeon__child__item">
<div class="accordeon__child__item__title">
Cтроительство кирпичных домов
</div>
<div class="accordeon__grandchild__group">
<div class="accordeon__grandchild__item">Текст</div>
<div class="accordeon__grandchild__item">Текст1</div>
<div class="accordeon__grandchild__item">Текст2</div>
<div class="accordeon__grandchild__item">Текст3</div>
<div class="accordeon__grandchild__item">Текст4</div>
</div> <!-- .accordeon__grandchild__group -->
</div> <!-- .accordeon__child__item -->
<div class="accordeon__child__item">
<div class="accordeon__child__item__title">
Cтроительство кирпичных домов
</div>
<div class="accordeon__grandchild__group">
<div class="accordeon__grandchild__item">Текст</div>
<div class="accordeon__grandchild__item">Текст1</div>
<div class="accordeon__grandchild__item">Текст2</div>
<div class="accordeon__grandchild__item">Текст3</div>
<div class="accordeon__grandchild__item">Текст4</div>
</div> <!-- .accordeon__grandchild__group -->
</div> <!-- .accordeon__child__item -->
</div> <!-- .accordeon__child__group -->
</div> <!-- .accordeon__item -->
<div class="accordeon__item">
<div class="accordeon__item__title">
Строительство домов
</div>
<div class="accordeon__child__group">
<div class="accordeon__child__item">
<div class="accordeon__child__item__title">
Cтроительство кирпичных домов
</div>
<div class="accordeon__grandchild__group">
<div class="accordeon__grandchild__item">Текст</div>
<div class="accordeon__grandchild__item">Текст1</div>
<div class="accordeon__grandchild__item">Текст2</div>
<div class="accordeon__grandchild__item">Текст3</div>
<div class="accordeon__grandchild__item">Текст4</div>
</div> <!-- .accordeon__grandchild__group -->
</div> <!-- .accordeon__child__item -->
<div class="accordeon__child__item">
<div class="accordeon__child__item__title">
Cтроительство кирпичных домов
</div>
<div class="accordeon__grandchild__group">
<div class="accordeon__grandchild__item">Текст</div>
<div class="accordeon__grandchild__item">Текст1</div>
<div class="accordeon__grandchild__item">Текст2</div>
<div class="accordeon__grandchild__item">Текст3</div>
<div class="accordeon__grandchild__item">Текст4</div>
</div> <!-- .accordeon__grandchild__group -->
</div> <!-- .accordeon__child__item -->
<div class="accordeon__child__item">
<div class="accordeon__child__item__title">
Cтроительство кирпичных домов
</div>
<div class="accordeon__grandchild__group">
<div class="accordeon__grandchild__item">Текст</div>
<div class="accordeon__grandchild__item">Текст1</div>
<div class="accordeon__grandchild__item">Текст2</div>
<div class="accordeon__grandchild__item">Текст3</div>
<div class="accordeon__grandchild__item">Текст4</div>
</div> <!-- .accordeon__grandchild__group -->
</div> <!-- .accordeon__child__item -->
<div class="accordeon__child__item">
<div class="accordeon__child__item__title">
Cтроительство кирпичных домов
</div>
<div class="accordeon__grandchild__group">
<div class="accordeon__grandchild__item">Текст</div>
<div class="accordeon__grandchild__item">Текст1</div>
<div class="accordeon__grandchild__item">Текст2</div>
<div class="accordeon__grandchild__item">Текст3</div>
<div class="accordeon__grandchild__item">Текст4</div>
</div> <!-- .accordeon__grandchild__group -->
</div> <!-- .accordeon__child__item -->
</div> <!-- .accordeon__child__group -->
</div> <!-- .accordeon__item -->
<div class="accordeon__item">
<div class="accordeon__item__title">
Строительство домов
</div>
<div class="accordeon__child__group">
<div class="accordeon__child__item">
<div class="accordeon__child__item__title">
Cтроительство кирпичных домов
</div>
<div class="accordeon__grandchild__group">
<div class="accordeon__grandchild__item">Текст</div>
<div class="accordeon__grandchild__item">Текст1</div>
<div class="accordeon__grandchild__item">Текст2</div>
<div class="accordeon__grandchild__item">Текст3</div>
<div class="accordeon__grandchild__item">Текст4</div>
</div> <!-- .accordeon__grandchild__group -->
</div> <!-- .accordeon__child__item -->
<div class="accordeon__child__item">
<div class="accordeon__child__item__title">
Cтроительство кирпичных домов
</div>
<div class="accordeon__grandchild__group">
<div class="accordeon__grandchild__item">Текст</div>
<div class="accordeon__grandchild__item">Текст1</div>
<div class="accordeon__grandchild__item">Текст2</div>
<div class="accordeon__grandchild__item">Текст3</div>
<div class="accordeon__grandchild__item">Текст4</div>
</div> <!-- .accordeon__grandchild__group -->
</div> <!-- .accordeon__child__item -->
<div class="accordeon__child__item">
<div class="accordeon__child__item__title">
Cтроительство кирпичных домов
</div>
<div class="accordeon__grandchild__group">
<div class="accordeon__grandchild__item">Текст</div>
<div class="accordeon__grandchild__item">Текст1</div>
<div class="accordeon__grandchild__item">Текст2</div>
<div class="accordeon__grandchild__item">Текст3</div>
<div class="accordeon__grandchild__item">Текст4</div>
</div> <!-- .accordeon__grandchild__group -->
</div> <!-- .accordeon__child__item -->
<div class="accordeon__child__item">
<div class="accordeon__child__item__title">
Cтроительство кирпичных домов
</div>
<div class="accordeon__grandchild__group">
<div class="accordeon__grandchild__item">Текст</div>
<div class="accordeon__grandchild__item">Текст1</div>
<div class="accordeon__grandchild__item">Текст2</div>
<div class="accordeon__grandchild__item">Текст3</div>
<div class="accordeon__grandchild__item">Текст4</div>
</div> <!-- .accordeon__grandchild__group -->
</div> <!-- .accordeon__child__item -->
</div> <!-- .accordeon__child__group -->
</div> <!-- .accordeon__item -->
</div> <!-- .accordeon -->
-
17:01
-
11:24
-
10:16
-
17:54
-
22:01
-
13:03
-
12:54
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
-
21:25
-
07:04
ТОП-10
- Почему SERVER_ADDR имеет не тот IP 47560 visits
- Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 30496 visits
- Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 23630 visits
- Как через css изменить цвет png изображения? 10349 visits
- Blob video url download 9958 visits
- Php curl запрос через прокси с авторизацией 9210 visits
- Работа с captcha vk api 8094 visits
© "hostciti.net" 24.11.2024 | 11:23