javascript - How to change fa-angle-left to fa-angle-down when we click on list item in ul

I have to change the fa-angle-left to fa-angle-down when we click on list item drop down in ul . Please refer below code.

<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>

Suggest me which changes i have to do to make this happen. Please refer JsFiddle also /

I have to change the fa-angle-left to fa-angle-down when we click on list item drop down in ul . Please refer below code.

<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>

Suggest me which changes i have to do to make this happen. Please refer JsFiddle also https://jsfiddle/ArunKumarUmma/4oyLhsup/1/

Share Improve this question edited Feb 17, 2017 at 7:52 m87 4,5113 gold badges18 silver badges31 bronze badges asked Feb 17, 2017 at 6:06 Arunkumar 2692 gold badges5 silver badges15 bronze badges

You marked this as using angular and then have said that my answer doesn't work, when it does. It only doesn't work because you aren't using angular – tic Commented Feb 17, 2017 at 7:34
it is working. but fa angle is changing when we click list items also.Check js fiddle . – Arunkumar Commented Feb 17, 2017 at 7:36

Add a ment |

3 Answers 3

Sorted by: Reset to default 3

We can achieve this using Jquery itself try the below code.

<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>

I used the following jQuery:

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

This means: On a click on any <a>nchor, find any element that has a className containing the string angle. If found toggleClass() the two classes .fa-angle-left and .fa-angle-down.

I added CSS instead of inline styles. I also added a bonus, click on the last 2 truck icons.

FIDDLE

SNIPPET

$('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./bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'>
<link rel="stylesheet" href="https://cdn.jsdelivr/fontawesome/4.6.3/css/font-awesome.min.css">
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src='https://maxcdn.bootstrapcdn./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>

in controller:

$scope.someVar = true;

in template:

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

When that li is clicked then it will toggle variable someVar on scope, and cause the class to change on i depending on whether someVar is true or false

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How to change fa-angle-left to fa-angle-down when we click on list item in ul - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)