1

Тема: послідовність виконання операцій в JavaScript

Маю нескладний код, який при натисканні на під-секцію має спочатку згортати розгорнуті блоки, а лише потім розгортати той блок, на який клікнуто, АЛЕ працює з точністю до навпаки :(
Підкажіть, будь ласка, що не так?
Там же написано, що спочатку все згорнути (close_all), а лише після цього розгорнути (accSection.classList.toggle("opened")...):

    accHeader.addEventListener('click', () => {
        close_all();
        if (!accSection.classList.contains("opened")) {            
        accSection.classList.toggle("opened");
        accBody.style.maxHeight = `${accContent.clientHeight}px`;
        accHeader.scrollIntoView(true);
        }
    });

2

Re: послідовність виконання операцій в JavaScript

а close_all  шо робе?

3

Re: послідовність виконання операцій в JavaScript

FakiNyan написав:

а close_all  шо робе?

close_all () згортає усі блоки:

function close_all(){
document.querySelectorAll('.AA_section').forEach((accSection) => {
    const accHeader = accSection.querySelector('.AA_header');
    const accBody = accSection.querySelector('.AA_body');
    const accContent = accSection.querySelector('.AA_body > *');
    if( accSection.classList.contains("opened") ) {
    accSection.classList.toggle("opened");
    accBody.style.maxHeight = "0px";
    }
});   
}

4

Re: послідовність виконання операцій в JavaScript

У вашій першій функції, ось тут

        accBody.style.maxHeight = `${accContent.clientHeight}px`;
        accHeader.scrollIntoView(true);

чому дорівнюють accBody і accHeader? Де вони виставляються?
І взагалі, гадаю, краще буде якось об'єднати хедери і тіла і змінювати тільки один параметр - наявність класу opened.

5

Re: послідовність виконання операцій в JavaScript

koala написав:

У вашій першій функції, ось тут

        accBody.style.maxHeight = `${accContent.clientHeight}px`;
        accHeader.scrollIntoView(true);

чому дорівнюють accBody і accHeader? Де вони виставляються?
І взагалі, гадаю, краще буде якось об'єднати хедери і тіла і змінювати тільки один параметр - наявність класу opened.

У першому повідомленні є лінк на повний код - там і стилі і JS в одному html-файлі. Зміна лише "наявність класу opened" не впливає на результат, я таке вже пробував.

6

Re: послідовність виконання операцій в JavaScript

То ся так не робе. Диви як треба: details>summary (mozilla.org, w3schools.com).

7

Re: послідовність виконання операцій в JavaScript

leofun01 написав:

То ся так не робе. Диви як треба: details>summary (mozilla.org, w3schools.com).

Та то ясно, шо можна по-різному, але питання в тім, чому мій код не робе, шо мав би.

8

Re: послідовність виконання операцій в JavaScript

чекнув, але шось хз, чого воно не робе.
там якась ніби затримка перед закриттям

9

Re: послідовність виконання операцій в JavaScript

Все.  Я розібрався.
проблєма в max-height: 999px
воно ж змінює значення цього параметру, і змінювати з 999 до 0 забирає багато часу ( але це  не точно)

10

Re: послідовність виконання операцій в JavaScript

з `AA_body` max-weight приберіть !important, а всередині click замініть присвоєння max-height на це 

accBody.style.maxHeight = `${accBody.scrollHeight}px`;

11

Re: послідовність виконання операцій в JavaScript

FakiNyan написав:

з `AA_body` max-weight приберіть !important, а всередині click замініть присвоєння max-height на це 

accBody.style.maxHeight = `${accBody.scrollHeight}px`;

Зробив, але ніц не помогло :(

12 Востаннє редагувалося mikeos (27.02.2024 09:21:34)

Re: послідовність виконання операцій в JavaScript

Не валідний html. немає відкриваючого тега <body>, а після </body> ше якийсь html. Також є закриваючий </noscript> а відкриваючого нема ). Пороблено напевно )

13

Re: послідовність виконання операцій в JavaScript

tellme написав:
FakiNyan написав:

з `AA_body` max-weight приберіть !important, а всередині click замініть присвоєння max-height на це 

accBody.style.maxHeight = `${accBody.scrollHeight}px`;

Зробив, але ніц не помогло :(

Новий код покажіть

14

Re: послідовність виконання операцій в JavaScript

тут ще роль грають transition в стилях

https://jsfiddle.net/50wg86mq/

15

Re: послідовність виконання операцій в JavaScript

FakiNyan написав:
tellme написав:
FakiNyan написав:

з `AA_body` max-weight приберіть !important, а всередині click замініть присвоєння max-height на це 

accBody.style.maxHeight = `${accBody.scrollHeight}px`;

Зробив, але ніц не помогло :(

Новий код покажіть

Код постійно тут

16

Re: послідовність виконання операцій в JavaScript

mikeos написав:

Не валідний html. немає відкриваючого тега <body>, а після </body> ше якийсь html. Також є закриваючий </noscript> а відкриваючого нема ). Пороблено напевно )

Виправив, дякую, але це не допомогло

17

Re: послідовність виконання операцій в JavaScript

tellme написав:
FakiNyan написав:
tellme написав:

Зробив, але ніц не помогло :(

Новий код покажіть

Код постійно тут

а, я забув сказати, шо ше треба прибрати оте

                max-height: 999px !important;

взагалі, бо ми встановлюємо правильне значення в коді

18

Re: послідовність виконання операцій в JavaScript

mikeos написав:

тут ще роль грають transition в стилях

https://jsfiddle.net/50wg86mq/

Дякую, буду розбирати! Тут вже є, що можу проаналізувати, над чим можу подумати!

19

Re: послідовність виконання операцій в JavaScript

FakiNyan написав:
tellme написав:
FakiNyan написав:

Новий код покажіть

Код постійно тут

а, я забув сказати, шо ше треба прибрати оте

                max-height: 999px !important;

взагалі, бо ми встановлюємо правильне значення в коді

ок

20

Re: послідовність виконання операцій в JavaScript

шо ок, я вам помилку розцегокав