изменить класс глифика, когда nav-элемент открыт

Question

Я использую меню начальной загрузки на веб-странице.

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

       <li><a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" 
       role="button" data-toggle="dropdown" aria-haspopup="true" aria- 
       expanded="false">main item

        <span class="pull-left glyph-btn-menu">
       <em class="glyphicon glyphicon-menu-down"></em>
       </span>
       </a>

        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
        sub item1<br>
        sub item2<br>
        sub item2<br>
        </div>
        </li>

Я хочу, чтобы символ глифа изменился на класс glyphicon-menu-up, когда нажата навигационная ссылка и открыты элементы подменю, а затем снова переключился обратно на glyphicon-menu-down, когда элемент nav закрыт или когда другой элемент навигации элемент нажат.

Какой лучший способ добиться этого

Answer 1

Так что это мое решение.

Я дал родителю ul значение id: id = "theme"

bootstrap добавляет класс open к открытому li, поэтому я проверяю, есть ли в li ли класс open, удаляем и добавляем классы глификона по мере необходимости

        $('#theme li').click(function () {
          if($(this).hasClass('open')){
              //alert('aaa');
                $(this).children('a').children('span').children('em').removeClass('glyphicon-menu-up');
              $(this).children('a').children('span').children('em').addClass('glyphicon-menu-down');
              } else {
                $(this).children('a').children('span').children('em').removeClass('glyphicon-menu-down');
              $(this).children('a').children('span').children('em').addClass('glyphicon-menu-up');
                  }
        });