当我们单击ul中的列表项时如何将fa-angle-left更改为fa-angle-down

Question

当我们点击 ul 中的下拉列表项时，我必须将 fa-angle-left 更改为 fa-angle-down 。请参考以下代码。

<nav>
    <ul class="nav nav-pills nav-stacked panel-group " id="accordion" data-spy="affix" data-offset-top="605">
        <!--<li class="active"><a href="#section1">Section 1</a></li>
    <li><a href="#section2">Section 2</a></li>
    <li><a href="#section3">Section 3</a></li>-->
        <li class="panel" style="margin-top: 0px">
            <a href="javascript:;" data-toggle="collapse" data-target="#demo1" data-parent="#accordion" style="margin-left: 0px; margin-top:"> <i class="fa fa-calendar " style="margin-right:  10px;"></i>Planning<i class="fa fa-angle-left " style="float: right !important;"></i> </a>
            <ul id="demo1" class="collapse ">
                <li style="margin-left: 0px"><span class="thumbnail" style="display:inline;border: 0px solid;background-color:#21252d;color:white;font-size:9px;margin-right:  12px;">
                     YE
                  </span><a ui-sref="">Yearly</a></li><br>
                <li style="margin-left: 0px"><span class="thumbnail" style="display:inline;border: 0px solid;background-color:#21252d;color:white;font-size:9px;margin-right:  12px;">
                     MO
                  </span><a ui-sref="">Monthly</a></li>
            </ul>
        </li>
        <li class="panel" style="margin-top: 0px">
            <a href="javascript:;" data-toggle="collapse" data-target="#demo2" data-parent="#accordion" style="margin-left: 0px; margin-top:"> <i class="fa fa-book " style="margin-right:  10px;"></i>Order<i class="fa fa-angle-left" style="float: right !important;"></i> </a>
            <ul id="demo2" class="collapse " data-parent="#accordion">
                <li style="margin-left: 0px"><span class="thumbnail" style="display:inline;border: 0px solid;background-color:#21252d;color:white;font-size:9px;margin-right:  12px; text-decoration: none ;">
                     AL
                  </span><a ui-sref="dashboard">All</a></li><br>
                <li style="margin-left: 0px"><span class="thumbnail" style="display:inline;border: 0px solid;background-color:#21252d;color:white;font-size:9px;margin-right:  12px;">
                     SE
                  </span><a ui-sref="sector">Sector</a></li><br>
                <li style="margin-left: 0px"><span class="thumbnail" style="display:inline;border: 0px solid;background-color:#21252d;color:white;font-size:9px;margin-right:  12px;">
                     DR
                  </span><a ui-sref="">Date Range</a></li><br>
                <li style="margin-left: 0px"><span class="thumbnail" style="display:inline;border: 0px solid;background-color:#21252d;color:white;font-size:9px;margin-right:  12px;">
                     DE
                  </span> <a ui-sref="">Delivered</a></li><br>
                <li style="margin-left: 0px"><span class="thumbnail" style="display:inline;border: 0px solid;background-color:#21252d;color:white;font-size:9px;margin-right:  12px;">
                     PE
                  </span><a ui-sref="">Pending</a></li>
            </ul>
        </li>
        <li class="panel" style="margin-top: 0px">
            <a href="javascript:;" data-toggle="collapse" data-target="#demo3" data-parent="#accordion" style="margin-left: 0px; margin-top:"> <i class="fa fa-truck" style="margin-right:  10px;"></i>Logistics<i class="fa fa-angle-left" style="float: right !important;"></i> </a>
            <ul id="demo3" class="collapse" data-parent="#accordion">
                <li style="margin-left: 0px"> <span class="thumbnail" style="display:inline;border: 0px solid;background-color:#21252d;color:white;font-size:9px;margin-right:  12px;">
                     AL
                  </span><a ui-sref="">All</a></li><br>
                <li style="margin-left: 0px"><span class="thumbnail" style="display:inline;border: 0px solid;background-color:#21252d;color:white;font-size:9px;margin-right:  12px;">
                     SE
                 </span><a ui-sref="">Sector</a></li><br>
                <li style="margin-left: 0px"><span class="thumbnail" style="display:inline;border: 0px solid;background-color:#21252d;color:white;font-size:9px;margin-right:  12px;">
                     CU
                  </span><a ui-sref="">Customer</a></li><br>
                <li style="margin-left: 0px"><span class="thumbnail" style="display:inline;border: 0px solid;background-color:#21252d;color:white;font-size:9px;margin-right:  12px;">
                     PE
                  </span><a ui-sref="">Pending</a></li>
            </ul>
        </li>
        <li class="panel" style="margin-top: 0px">
            <a href="javascript:;" data-toggle="collapse" data-target="#demo4" style="margin-left: 0px; margin-top:"> <i class="fa fa-truck" style="margin-right:  10px;"></i>Delivery </a>
        </li>
        <li class="panel" style="margin-top: 0px">
            <a href="javascript:;" data-toggle="collapse" data-target="#demo4" style="margin-left: 0px; margin-top:"> <i class="fa fa-truck" style="margin-right:  10px;"></i>Delivery </a>
        </li>
    </ul>
</nav>

建议我必须做哪些改变才能实现这一目标。 也请参考 JsFiddle https://jsfiddle.net/ArunKumarUmma/4oyLhsup/1/

Answer 1

我们可以使用 Jquery 本身来实现这一点，试试下面的代码。

<i class="fa fa-angle-left" onClick="($(this)[0].className == 'fa fa-angle-left')?$(this)[0].className='fa fa-angle-down':$(this)[0].className='fa fa-angle-left'" style="float: right !important;"></i>

Answer 2

我使用了以下 jQuery：

$('a').on('click', function(e) {
    $(this).find('[class*="angle"]').toggleClass('fa-angle-left fa-angle-down')
});

这意味着：单击任何<a>nchor 时，找到任何具有包含字符串angle 的className 的元素。如果找到toggleClass()这两个类.fa-angle-left和.fa-angle-down。

我添加了 CSS 而不是内联样式。我还添加了一个奖励，点击最后 2 个卡车图标。

FIDDLE

片段

$('a').on('click', function(e) {
  $(this).find('[class*="angle"]').toggleClass('fa-angle-left fa-angle-down')
});

$('.go').on('click', function(e) {
  $(this).css({
    transform: 'translateX(-195px)',
    transition: 'transform .5s'
  });
});

.panel>a {
  display: table-row;
}

i {
  display: table-cell
}

i:last-of-type {
  float: right
}

<link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/fontawesome/4.6.3/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'></script>
<nav>
  <ul class="nav nav-pills nav-stacked panel-group " id="accordion" data-spy="affix" data-offset-top="605">


    <!--<li class="active"><a href="#section1">Section 1</a></li>
        <li><a href="#section2">Section 2</a></li>
        <li><a href="#section3">Section 3</a></li>-->

    <li class="panel" style="margin-top: 0px">
      <a href="javascript:;" data-toggle="collapse" data-target="#demo1" data-parent="#accordion" style="margin-left: 0px; margin-top:">
        <i class="fa fa-calendar" style="margin-right:10px;"></i> Planning
        <i class="fa fa-angle-left"></i>
        <!-- ✎ -->
      </a>

      <ul id="demo1" class="collapse">

        <li style="margin-left: 0px"><span class="thumbnail" style="display:inline;border: 0px solid;background-color:#21252d;color:white;font-size:9px;margin-right:  12px;">
                         YE
                      </span><a ui-sref="">Yearly</a></li>
        <br>
        <li style="margin-left: 0px"><span class="thumbnail" style="display:inline;border: 0px solid;background-color:#21252d;color:white;font-size:9px;margin-right:  12px;">
                         MO
                      </span><a ui-sref="">Monthly</a></li>

      </ul>
    </li>
    <li class="panel" style="margin-top: 0px">
      <a href="javascript:;" data-toggle="collapse" data-target="#demo2" data-parent="#accordion" style="margin-left: 0px; margin-top:"> <i class="fa fa-book " style="margin-right:  10px;"></i>Order
        <i class="fa fa-angle-left"></i>
        <!-- ✎ -->
      </a>
      <ul id="demo2" class="collapse " data-parent="#accordion">
        <li style="margin-left: 0px"><span class="thumbnail" style="display:inline;border: 0px solid;background-color:#21252d;color:white;font-size:9px;margin-right:  12px; text-decoration: none ;">
                         AL
                      </span><a ui-sref="dashboard">All</a></li>
        <br>

        <li style="margin-left: 0px"><span class="thumbnail" style="display:inline;border: 0px solid;background-color:#21252d;color:white;font-size:9px;margin-right:  12px;">
                         SE
                      </span><a ui-sref="sector">Sector</a></li>
        <br>
        <li style="margin-left: 0px"><span class="thumbnail" style="display:inline;border: 0px solid;background-color:#21252d;color:white;font-size:9px;margin-right:  12px;">
                         DR
                      </span><a ui-sref="">Date Range</a></li>
        <br>
        <li style="margin-left: 0px"><span class="thumbnail" style="display:inline;border: 0px solid;background-color:#21252d;color:white;font-size:9px;margin-right:  12px;">
                         DE
                      </span>
          <a ui-sref="">Delivered</a></li>
        <br>
        <li style="margin-left: 0px"><span class="thumbnail" style="display:inline;border: 0px solid;background-color:#21252d;color:white;font-size:9px;margin-right:  12px;">
                         PE
                      </span><a ui-sref="">Pending</a></li>

      </ul>
    </li>
    <li class="panel" style="margin-top: 0px">
      <a href="javascript:;" data-toggle="collapse" data-target="#demo3" data-parent="#accordion" style="margin-left: 0px; margin-top:"> <i class="fa fa-truck" style="margin-right:  10px;"></i>Logistics<i class="fa fa-angle-left"></i>
      </a>
      <ul id="demo3" class="collapse" data-parent="#accordion">

        <li style="margin-left: 0px"> <span class="thumbnail" style="display:inline;border: 0px solid;background-color:#21252d;color:white;font-size:9px;margin-right:  12px;">
                         AL
                      </span><a ui-sref="">All</a></li>
        <br>
        <li style="margin-left: 0px"><span class="thumbnail" style="display:inline;border: 0px solid;background-color:#21252d;color:white;font-size:9px;margin-right:  12px;">
                         SE
                     </span><a ui-sref="">Sector</a></li>
        <br>
        <li style="margin-left: 0px"><span class="thumbnail" style="display:inline;border: 0px solid;background-color:#21252d;color:white;font-size:9px;margin-right:  12px;">
                         CU
                      </span><a ui-sref="">Customer</a></li>
        <br>
        <li style="margin-left: 0px"><span class="thumbnail" style="display:inline;border: 0px solid;background-color:#21252d;color:white;font-size:9px;margin-right:  12px;">
                         PE
                      </span><a ui-sref="">Pending</a></li>


      </ul>
    </li>
    <li class="panel" style="margin-top: 0px">
      <a href="javascript:;" data-toggle="collapse" data-target="#demo4" style="margin-left: 0px; margin-top:"> <i class="fa fa-truck go" style="margin-right:  10px;"></i>Delivery
      </a>
    </li>
    <li class="panel" style="margin-top: 0px">
      <a href="javascript:;" data-toggle="collapse" data-target="#demo4" style="margin-left: 0px; margin-top:"> <i class="fa fa-truck go" style="margin-right:  10px;"></i>Delivery
      </a>
    </li>


  </ul>
</nav>

Answer 3

在控制器中：

$scope.someVar = true;

在模板中：

<li ng-click="someVar = !someVar"></li>
    <i ng-class="{'fa-angle-left': someVar, 'fa-angle-down': !someVar}"></i>
</li>

当点击li 时，它将在作用域上切换变量someVar，并导致类在i 上根据someVar 是真还是假而改变