Please help me to understand this task with a sliding menu

JavaScript
1

Hi there!

Can you please help me to understand this task with a sliding menu: https://codepen.io/annie_murkina/pen/zXEgLO

I do not understand these two lines:

    let title = event.target.closest('.title');

and

    list.hidden = !list.hidden;

How does this code act in simple words? Thank you!

2

Heya!

Let’s start with let title = event.target.closest('.title');:

<li>
  <span class="title">Другие</span>
  <ul>
    <li>Змеи</li>
    <li>Птицы</li>
    <li>Ящерицы</li>
  </ul>
</li>

Since there are several nested lists, let title = event.target.closest('.title'); will find the closest <li> tag (i.e. title) to the item that is clicked.

list.hidden = !list.hidden;

This bit of code is flipping a switch and changing it to the opposite of its current value. The ! operator will change the boolean value to the opposite of its current value. Example:

const toggle = true;
console.log(toggle);  // true

toggle = !toggle;
console.log(toggle);  // false

toggle = !toggle;
console.log(toggle); // true

Hope that helps! Let me know if you have any other questions.

3

Thank you so much! This helped :slight_smile:

1 Like
4

You’re very welcome! Best of luck!