Change label class (icon-font) with click

Question

I am using iconfonts in a drop-down menu, where the link is as follows:

<li class="abre-dropdown"><a href="javascript:void(0)"><label style="float:left;" class="icon-location"></label>Nossa casa<label class="icon-down-dir"></label></a></li>

It is possible to make the label change its class when the menu is active (toggle effect) icon-down-dir for any other, such as icon-up-dir?

jquery script to open/close the menu:

var $j = jQuery.noConflict();
$j(".abre-dropdown").click(function(){
    $j(this).children("ul").slideToggle();
})
$j("ul").click(function(p){
    p.stopPropagation();
})

Answer 1

Use the .toggleClass() jquery

$(".abre-dropdown").click(function(){
    $(this).toggleClass(function() {
      if ( $( this ).hasClass("icon-down-dir") ) {
        return "icon-up-dir";
      } else {
        return "icon-down-dir";
      }
    });
});

It would be something like this, I made an example for you at jsFiddler.

Answer 2

Below is a solution to your problem:

var $ = jQuery.noConflict();
$("nav li.abre-dropdown > a").on('click', function() {
  var $label = $(this).parent().find('> a > .icon-down-dir, > a > .icon-up-dir');
  var $isdown = $label.is('.icon-down-dir');
  $label
    .removeClass()
    .addClass($isdown ? 'icon-up-dir' : 'icon-down-dir')
});

/* Remover esse reset adicionar pra facilitar a visualização */

* {
  margin: 0;
  padding: 0;
  line-height: 1;
  font-family: sans-serif;
}
.menuMobile ul li {
  border-top: 1px solid #38393f;
  background: #25262a;
}
.menuMobile ul li a {
  color: #fff;
  display: block;
  padding: 15px 0 15px 10px;
}
.menuMobile ul li a label {
  float: right;
}
.menuMobile ul li a:hover {
  color: deepskyblue;
  transition: color 0.5s;
}
/* Remover so serve para pintar oque seria o icone */

.icon-down-dir {
  background: red;
  display: inline-block;
  width: 15px;
  height: 15px;
}
.icon-up-dir {
  background: blue;
  display: inline-block;
  width: 15px;
  height: 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="menuMobile">
  <li class="abre-dropdown">
    <a href="javascript:void(0)">
      <label style="float:left;" class="icon-location"></label>Nossa casa
      <label class="icon-down-dir"></label>
    </a>
    <ul class="submenu-1">
      <li class="abre-dropdown">
        <a href="javascript:void(0)">
          <label style="float:left;" class="icon-home"></label>Sobre nós
          <label class="icon-down-dir"></label>
        </a>
        <ul class="submenu-2">
          <li><a href="#terreiro">A casa</a>
          </li>
          <li><a href="#mae-maria">Mãe Maria C.</a>
          </li>
          <li><a href="#ogans">Ogans</a>
          </li>
          <li><a href="#filhos">Filhos</a>
          </li>
          <li><a href="#festas">Festas</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="http://<?php echo $url; ?>/agenda">
          <label style="float:left;" class="icon-calendar"></label>Agenda</a>
      </li>
      <li>
        <a href="http://<?php echo $url; ?>/localizacao">
          <label style="float:left;" class="icon-location"></label>Localização</a>
      </li>
      <li>
        <a href="http://<?php echo $url; ?>/contato">
          <label style="float:left;" class="icon-phone"></label>Contato</a>
      </li>
    </ul>
  </li>
</nav>