Jquery 打开菜单后引导4插入符号方向更改

Jquery 打开菜单后引导4插入符号方向更改,jquery,css,twitter-bootstrap,bootstrap-4,caret,Jquery,Css,Twitter Bootstrap,Bootstrap 4,Caret,我不熟悉Bootstrap4。我有一个导航菜单,里面有一个下拉项。它的标准引导插入符号指向下方,会自动添加 现在,我想在打开导航项的下拉菜单后将方向更改为“向上”。我已经搜索了整个互联网和其他地方,但如果不使用“字体很棒”或变通方法,就找不到Bootstrap4的有效解决方案 以下是我的菜单HTML代码(工作正常),包括下拉项(第2项): CSS或jQuery解决方案是可以的,只要它不是一个解决方案,而是一个好的、干净的引导解决方案。应该有可能吧 那么,在打开下拉项时,谁能帮助我将插入符

我不熟悉Bootstrap4。我有一个导航菜单,里面有一个下拉项。它的标准引导插入符号指向下方,会自动添加

现在,我想在打开导航项的下拉菜单后将方向更改为“向上”。我已经搜索了整个互联网和其他地方,但如果不使用“字体很棒”或变通方法,就找不到Bootstrap4的有效解决方案

以下是我的菜单HTML代码(工作正常),包括下拉项(第2项):


  • CSS或jQuery解决方案是可以的,只要它不是一个解决方案,而是一个好的、干净的引导解决方案。应该有可能吧


    那么,在打开下拉项时,谁能帮助我将插入符号的方向从下向上更改?终于有了动画片。提前谢谢

    您可以像这样简单地旋转它:

    。下拉切换[aria expanded=“true”]:之后{
    变换:旋转(180度);
    }
    /*对于动画*/
    .下拉切换:之后{
    过渡:0.5s;
    }
    
    

  • 好吧,哇,我想我把重点放在了引导代码的错误部分,找到了解决方案。这很有效,你真是太棒了。谢谢
    <nav class="navbar navbar-expand-sm navbar-light">
      <a class="navbar-brand" href="#"><img src="img/logo.svg" width="80" height="80" alt="Logo"></a>
      <button type="button" class="navbar-toggler" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <div class="collapse navbar-collapse">
        <div class="navbar-nav">
          <a class="nav-item nav-link active" href="#">Item 1<span class="sr-only">(current)</span></a>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="" data-toggle="dropdown">Item 2</a>
            <div class="dropdown-menu">
              <a class="dropdown-item" href="#">Item 2.1</a>
              <a class="dropdown-item" href="#">Item 2.2</a>
              <a class="dropdown-item" href="#">Item 2.3</a>
            <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Item 2.4</a>
            </div>
          </li>
          <a class="nav-item nav-link" href="#">Item 3</a>
          <a class="nav-item nav-link" href="#">Item 4</a>
        </div>
      </div>
    </nav>