вложенные данные-toogle: свернуть меню автоматически закрывается при открытии дочерних меню

Question

У меня проблемы с меню боковой панели (в настоящее время я использую Serein admin bootstrap).

вот мое меню выглядит так:

when i click the "Level 1 - Item 1", the dropdown doesn't expand, it's just closing the parent menu like this:

and this is my entire sidebar menu code html:

    <nav class="sidebar sidebar-offcanvas" id="sidebar">
        <ul class="nav">
          <li class="nav-item">
            <a class="nav-link" data-toggle="collapse" href="#ui-setting" aria-expanded="false" aria-controls="ui-advanced">
              <i class="mdi mdi-settings menu-icon"></i>
              <span class="menu-title">@lang('umum.setting')</span>
              <i class="menu-arrow"></i>
            </a>
            <div class="collapse" id="ui-setting">
              <ul class="nav flex-column sub-menu">
                <li class="nav-item"> <a class="nav-link {{ Request::is('setting/user') || Request::is('setting/user/*') ? 'active' : ''}}" href="{{route('user')}}">@lang('umum.user')</a></li>
              </ul>
            </div>
          </li>

          <li class="nav-item">
            <a class="nav-link" data-toggle="collapse" role="button" href="#menu-level" aria-expanded="false" aria-controls="">
              <i class="mdi mdi-file-document-box-outline menu-icon"></i>
              <span class="menu-title">Menu Level</span>
              <i class="menu-arrow"></i>
            </a>
            <div class="collapse" id="menu-level">
              <ul class="nav flex-column sub-menu">
                <a class="nav-link" data-toggle="collapse" style="cursor: pointer;" role="button" data-target="#menu-level2" aria-expanded="false" aria-controls="">
                  <span class="menu-title">Level 1 - Item 1</span>
                  <i class="menu-arrow"></i>
                </a>
                <div class="collapse" id="menu-level2">
                  <ul class="nav flex-column sub-menu" style="margin-left: -4em;">
                    <a class="nav-link" data-toggle="collapse" style="cursor: pointer;" data-target="#menu-level3" aria-expanded="false" aria-controls="form-elements">
                      <span class="menu-title">Level 2 - Item 1</span>
                      <i class="menu-arrow"></i>
                    </a>
                    <div class="collapse" id="menu-level3">
                      <ul class="nav flex-column sub-menu" style="margin-left: -4em;">
                        <a class="nav-link" data-toggle="collapse" style="cursor: pointer;" href="javascript:;" aria-expanded="false" aria-controls="form-elements">
                          <span class="menu-title">Level 3 - Item 1</span>
                        </a>
                        <a class="nav-link" data-toggle="collapse" style="cursor: pointer;" href="javascript:;" aria-expanded="false" aria-controls="form-elements">
                          <span class="menu-title">Level 3 - Item 2</span>
                        </a>
                        <a class="nav-link" data-toggle="collapse" style="cursor: pointer;" href="javascript:;" aria-expanded="false" aria-controls="form-elements">
                          <span class="menu-title">Level 3 - Item 3</span>
                        </a>
                      </ul>
                    </div>
                  </ul>
                  <ul class="nav flex-column sub-menu" style="margin-left: -4em;">
                    <a class="nav-link" data-toggle="collapse" style="cursor: pointer;" data-target="#menu2-level3" aria-expanded="false" aria-controls="form-elements">
                      <span class="menu-title">Level 2 - Item 2</span>
                      <i class="menu-arrow"></i>
                    </a>
                    <div class="collapse" id="menu2-level3">
                      <ul class="nav flex-column sub-menu" style="margin-left: -4em;">
                        <a class="nav-link" data-toggle="collapse" style="cursor: pointer;" href="javascript:;" aria-expanded="false" aria-controls="form-elements">
                          <span class="menu-title">Level 3 - Item 1</span>
                        </a>
                        <a class="nav-link" data-toggle="collapse" style="cursor: pointer;" href="javascript:;" aria-expanded="false" aria-controls="form-elements">
                          <span class="menu-title">Level 3 - Item 2</span>
                        </a>
                      </ul>
                    </div>
                  </ul>
                </div>

                <li class="nav-item" style="margin-left: 0.25em;"><a class="nav-link" href="javascript:;">Level 1 - Item 2</a></li>
                <li class="nav-item" style="margin-left: 0.25em;"><a class="nav-link" href="javascript:;">Level 1 - Item 3</a></li>
              </ul>
            </div>
          </li>
        </ul>
      </nav>

У кого-нибудь есть решение, пожалуйста ??