How to allow auto-close dropdown menu in Bootstrap 4 after click?

Question

Bootstrap

How to allow auto-close dropdown menu in Bootstrap 4 after click on smartphone? Everything is closed on the computer. On a smartphone, after clicking me, it remains open.

<!-- Главное меню -->
    <div class="container">
      <nav class="navbar fixed-top navbar-expand-lg navbar-dark"
        style="background-color: #2B2C7F; box-shadow: 8px 8px 40px rgba(0, 0, 0, 0.5);">
        <a class="navbar-brand" href="#"><i class="fas fa-home"></i></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
          aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
              <a class="nav-link" data-value="main" href="#">ГЛАВНАЯ <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" data-value="news" href="#">НОВОСТИ</a>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
                aria-haspopup="true" aria-expanded="false">
                ПРОДУКЦИЯ
              </a>
              <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                <a class="dropdown-item" data-value="tovar-1" href="#">ТОВАР 1</a>
                <a class="dropdown-item" data-value="tovar-2" href="#">ТОВАР 2</a>
                <a class="dropdown-item" data-value="tovar-3" href="#">ТОВАР 3</a>
                <a class="dropdown-item" data-value="tovar-4" href="#">ТОВАР 4</a>
              </div>
            </li>
            <li class="nav-item">
              <a class="nav-link" data-value="photo" href="#">ЗАСТОСУВАННЯ</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" data-value="contacts" href="#">КОНТАКТЫ</a>
            </li>
            <li>
              <a class="nav-link" href="mailto:[email protected]" style="color: white;"><i class="fas fa-envelope"></i></a>
            </li>
          </ul>
        </div>
      </nav>
    </div>

Answer 1

Well, because each time the function is re-initialized and calculatorIsOnbecomes false due to ? let calculatorIsOn = false;