twitter-bootstrap-3 - 导航项打开时更改字形图标的类

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 符号在单击导航链接并打开子菜单项时更改为 glyphicon-menu-up 类，然后在导航项关闭或单击不同的导航项时再次更改回 glyphicon-menu-down .

实现这一目标的最佳方法是什么

标签： twitter-bootstrap-3

Answer 1

所以这是我的解决方案。

我给了父 ul 一个 id 值：id="theme"

bootstrap 将打开的类添加到打开的 li，所以我检查是否有任何 li 有打开的类，根据需要删除并添加 glyphicon 类

        $('#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');
                  }
        });