Как изменить fa-angle-left на fa-angle-down, когда мы нажимаем на элемент списка в ul

Мне нужно изменить fa-angle-left на fa-angle-down, когда мы нажимаем на элемент списка, ul. См. Ниже код.Как изменить fa-angle-left на fa-angle-down, когда мы нажимаем на элемент списка в ul

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

источник

2017-02-17 Arunkumar

Вы отметили это, как с помощью углового, а затем сказали, что мой ответ не работает, когда он делает. Это только не работает, потому что вы не используете угловой – tic

он работает. но fa angle меняется, когда мы также нажимаем элементы списка. Проверьте скрипт js. – Arunkumar

в контроллере:

$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 истинным или ложным

источник

2017-02-17 06:15:03 tic

Когда я нажимаю на элементы списка в раскрывающемся списке, он также меняет направление налево. Он должен меняться только тогда, когда мы нажимаем на li.check this fiddle. https://jsfiddle.net/ArunKumarUmma/4oyLhsup/1/ – Arunkumar

Мы можем добиться этого, используя 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>

источник

2017-02-17 07:02:06 saktivel

Нет, теперь он работает над этой скрипкой для первого элемента https://jsfiddle.net/ArunKumarUmma/u12jf006/1/ – Arunkumar

его проблема с шрифтом awesome, пожалуйста, проверьте элемент вы увидите изменение имени класса :) – saktivel

, пожалуйста, попробуйте прямо сейчас! – saktivel

Я использовал следующий JQuery:

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

Это означает: На мыши на любом <a> nchor, найти любой элемент, который имеет Classname, содержащий строку angle. Если найдено toggleClass() два класса .fa-angle-left и .fa-angle-down.

Я добавил CSS вместо встроенных стилей. Я также добавил бонус , нажмите на последние два значка грузовика.

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

источник

2017-02-17 08:33:30 zer00ne

Как изменить fa-angle-left на fa-angle-down, когда мы нажимаем на элемент списка в ul

ответ

Смежные вопросы