Appearance of blocks when clicking on the link, hiding when clicking again and changing the link + add / remove class?

Question

JavaScript

Guys have the following html code

<nav class="main-mnu">
  <ul>
    <li>
    <a href="#">Ссылка 1<i class="mdi mdi-chevron-down f_right"></i></a>
    <div class="dropdown-block">
      Содержимое для 1 ссылки
    </div>
    </li>

    <li>
    <a href="#">Ссылка 2<i class="mdi mdi-chevron-down f_right"></i></a>
    <div class="dropdown-block">
      Содержимое для 2 ссылки
    </div>
    </li>

    <li>
    <a href="#">Ссылка 3<i class="mdi mdi-chevron-down f_right"></i></a>
    <div class="dropdown-block">
      Содержимое для 3 ссылки
    </div>
    </li>

    <li>
    <a href="#">Ссылка 4<i class="mdi mdi-chevron-down f_right"></i></a>
    <div class="dropdown-block">
      Содержимое для 4 ссылки
    </div>
    </li>

    <li>
    <a href="#">Ссылка 5<i class="mdi mdi-chevron-down f_right"></i></a>
    <div class="dropdown-block">
      Содержимое для 5 ссылки
    </div>
    </li>

    <li>
    <a href="#">Ссылка 6<i class="mdi mdi-chevron-down f_right"></i></a>
    <div class="dropdown-block">
      Содержимое для 6 ссылки
    </div>
    </li>

    <li>
    <a href="#">Ссылка 7<i class="mdi mdi-chevron-down f_right"></i></a>
    <div class="dropdown-block">
      Содержимое для 7 ссылки
    </div>
    </li>
  </ul>
</nav>

Initially, only the menu is displayed, the blocks are hidden. You need the following when you click on a link, display a block for this link, when you click on a link again or click on another link, we hide the open block and open the block for another link. Also, when clicking outside the links and outside the open block, close the open block. You also need to add a class for li or for a (should be added when clicking and removed when repeated, etc.) for example open or active for subsequent painting in css.
Please help, I have been suffering for the second day.

Answer 1

I agree with Dima Turkov , but here's another option: https://jsfiddle.net/45tva8o3/2/

Answer 2

Through one place, of course , but the task generally looks like a task for the community. Not your code to check what is wrong, etc.

Answer 3

Thanks guys. Helped solve my issue.
The first example lacks closing the previously opened block and clearing the active class when clicking on another link.
In the second, when you click on the link again, to hide the block and clear the active class