Непонятная логика в аккордеоне

180

06 мая 2019, 19:50

В моём понимании при нажатии первой полосы должно быть:

Присваивание класса .active и окрашивание в зелёный цвет.
Выпадение соответствующего сообщения из первой полосы.

А получается иначе:

Присваивание класса .active и окрашивание в зелёный цвет. - ЭТО СРАБАТЫВАЕТ
Выпадение соответствующего сообщения из первой полосы. - ЭТО СРАБАТЫВАЕТ ТОЛЬКО ПОСЛЕ ПОВТОРНОГО НАЖАТИЯ.

Почему 2-ой этап срабатывает только после повторного нажатия? Мне не нужна правильная реализация - она есть на www.w3schools.com. Мне нужно объяснение, почему не срабатывает if(panel.style.display === 'none'), после которого, по логике вещей, реализуется panel.style.display = 'block'; и сообщение должно появляться сразу же, но появляется со второго раза.

let acc = document.getElementsByTagName('h3'); 
 
for (let i=0; i < acc.length;i++) { 
  acc[i].addEventListener('click',function(){ 
    this.classList.toggle('active'); 
    let panel = this.nextElementSibling; 
    if(panel.style.display === 'none'){ 
      panel.style.display = 'block'; 
    } 
    else { 
      panel.style.display = 'none'; 
    } 
  }) 
};

h3 { 
  cursor: pointer; 
  background-color: #ccc; 
  margin: 0; 
  padding: 10px; 
} 
h3:hover { 
  background-color: gray; 
} 
p { 
  display: none; 
  border: 1px dashed #000; 
} 
.active, .accordion:hover { 
    background-color: lightgreen; 
}

 <h3>Accordion #1</h3> 
 <p>Know about UX and the User-Centered Design (UCD) Process 
Learn how to create the golden thread between your product and the user 
Use reliable UX methodologies to create an effective UX strategy 
Bring your UX strategy to life with wireframes and prototypes 
Set measurable metrics and conduct user tests to improve digital products</p> 
 <h3>Accordion #2</h3> 
 <p>Know about UX and the User-Centered Design (UCD) Process 
Learn how to create the golden thread between your product and the user 
Use reliable UX methodologies to create an effective UX strategy 
Bring your UX strategy to life with wireframes and prototypes 
Set measurable metrics and conduct user tests to improve digital products</p> 
 <h3>Accordion #3</h3> 
 <p>Know about UX and the User-Centered Design (UCD) Process 
Learn how to create the golden thread between your product and the user 
Use reliable UX methodologies to create an effective UX strategy 
Bring your UX strategy to life with wireframes and prototypes 
Set measurable metrics and conduct user tests to improve digital products</p>

Answer 1

Для ответа на ваш вопрос надо воспользоваться дебагом.

Причина в том, что у вас panel.style.display при первом нажатии пустое. Потому что вы скрываете его с помощью css.

Если хотите узнать, какое значение стиля у элемента в данный момент времени можете воспользоваться getComputedStyle.

Код, который показывает ошибку:

let acc = document.getElementsByTagName('h3'); 
 
for (let i = 0; i < acc.length; i++) { 
  acc[i].addEventListener('click', function() { 
    this.classList.toggle('active'); 
    let panel = this.nextElementSibling; 
    console.log('Значение panel.style.display = ', panel.style.display); 
    if (panel.style.display === 'none') { 
      panel.style.display = 'block'; 
    } else { 
      panel.style.display = 'none'; 
    } 
  }) 
};

h3 { 
  cursor: pointer; 
  background-color: #ccc; 
  margin: 0; 
  padding: 10px; 
} 
 
h3:hover { 
  background-color: gray; 
} 
 
p { 
  display: none; 
  border: 1px dashed #000; 
} 
 
.active, 
.accordion:hover { 
  background-color: lightgreen; 
}

<h3>Accordion #1</h3> 
<p>Know about UX and the User-Centered Design (UCD) Process Learn how to create the golden thread between your product and the user Use reliable UX methodologies to create an effective UX strategy Bring your UX strategy to life with wireframes and prototypes 
  Set measurable metrics and conduct user tests to improve digital products</p> 
<h3>Accordion #2</h3> 
<p>Know about UX and the User-Centered Design (UCD) Process Learn how to create the golden thread between your product and the user Use reliable UX methodologies to create an effective UX strategy Bring your UX strategy to life with wireframes and prototypes 
  Set measurable metrics and conduct user tests to improve digital products</p> 
<h3>Accordion #3</h3> 
<p>Know about UX and the User-Centered Design (UCD) Process Learn how to create the golden thread between your product and the user Use reliable UX methodologies to create an effective UX strategy Bring your UX strategy to life with wireframes and prototypes 
  Set measurable metrics and conduct user tests to improve digital products</p>

Вот как можно сделать, используя getComputedStyle.

let acc = document.getElementsByTagName('h3'); 
 
for (let i = 0; i < acc.length; i++) { 
  acc[i].addEventListener('click', function() { 
    this.classList.toggle('active'); 
    let panel = this.nextElementSibling; 
    var styleDisplay = getComputedStyle(panel).display; // вычисляем текущие свойства 
    console.log('Значение panel.style.display = ', styleDisplay); 
    if (styleDisplay === 'none') { 
      panel.style.display = 'block'; 
    } else { 
      panel.style.display = 'none'; 
    } 
  }) 
};

h3 { 
  cursor: pointer; 
  background-color: #ccc; 
  margin: 0; 
  padding: 10px; 
} 
 
h3:hover { 
  background-color: gray; 
} 
 
p { 
  display: none; 
  border: 1px dashed #000; 
} 
 
.active, 
.accordion:hover { 
  background-color: lightgreen; 
}

<h3>Accordion #1</h3> 
<p>Know about UX and the User-Centered Design (UCD) Process Learn how to create the golden thread between your product and the user Use reliable UX methodologies to create an effective UX strategy Bring your UX strategy to life with wireframes and prototypes 
  Set measurable metrics and conduct user tests to improve digital products</p> 
<h3>Accordion #2</h3> 
<p>Know about UX and the User-Centered Design (UCD) Process Learn how to create the golden thread between your product and the user Use reliable UX methodologies to create an effective UX strategy Bring your UX strategy to life with wireframes and prototypes 
  Set measurable metrics and conduct user tests to improve digital products</p> 
<h3>Accordion #3</h3> 
<p>Know about UX and the User-Centered Design (UCD) Process Learn how to create the golden thread between your product and the user Use reliable UX methodologies to create an effective UX strategy Bring your UX strategy to life with wireframes and prototypes 
  Set measurable metrics and conduct user tests to improve digital products</p>