change font-awesome icon when toggled

Question

Я пытаюсь найти способ изменить этот значок на fa-времена, когда мое меню переключается, а затем переключается обратно на fa-бары, когда меню переключается назад/закрывается.

Я пробовал некоторые коды уже в этом jsfiddle. http://jsfiddle.net/3RBQ4/39/

<nav class="primary_nav"> 
    <label for="show-menu" class="label-show-menu"><i class="fa fa-bars fa-2x"></i></label> 
    <input type="checkbox" id="show-menu" role="button"> 
    <ul id="menu"> 
     <li><a href="index">Home</a></li> 
     <li><a href="about">About</a></li> 
     <li> 
      <a href="services">Services</a> 
      <!-- <ul> 
       <li><a href="">Building</a></li> 
       <li><a href="">Plumbing</a></li> 
       <li><a href="">Electrician</a></li> 
       <li><a href="">Roofing</a></li> 
       </ul> --> 
     </li> 
     <li><a href="gallery">Gallery</a></li> 
     <li><a href="contact">Contact Us</a></li> 
     <li><a href="quote"><span class="get-quote">Get a Quote!</span></a></li> 
    </ul> 
</nav> 

CSS:

input[type=checkbox]{ 
    display:none; 
} 
.label-show-menu { 
    display: none; 
} 
#menu { 
    outline: 1px solid red; 
    overflow:hidden; 
    height: auto; 
    max-height: 0; 
    transition: max-height 0.5s ease-in-out; 
} 

#menu.expanded { 
    background: red; 
    max-height: 500px; 
} 

@media (max-width:632px){ 
    .label-show-menu { 
     display: block; 
    } 
} 

JS

$('#show-menu').bind('click', function(e) { 
    $('.label-show-menu').removeClass('fa fa-bars').addClass('fa fa-times') 
    $('#menu').toggleClass('expanded'); 
}); 

Answer 1

Другой способ сделать это - использовать скрытый флажок. Затем эта метка используется для установки флажка. Так как флажки получают псевдо-класс :checked, при переключении вы можете использовать его для стилей элементов-близнецов. Давайте пройдем через это.

Вот HTML, для справки:

<div id="content"> 
    <input type="checkbox" id="toggle"> 
    <label for="toggle"> 
     <i id="bars" class="fa fa-bars fa-fw"></i> 
     <i id="cross" class="fa fa-times fa-fw"></i> 
    </label> 
    <div id="menu"> 
     <ul> 
      <li>item one</li> 
      <li>item one</li> 
      <li>item one</li> 
      <li>item one</li> 
     </ul> 
    </div> 
</div> 

Первое, что мы хотим сделать, это скрыть, что некрасивый флажок! Никто не хочет этого видеть.

#toggle { 
    display: none; 
    position: absolute; 
    top: -100%; 
    left: -100%; 
    cursor: pointer; 
} 

Но как мы можем переключить флажок, если он скрыт? Легко. Используйте ярлык:

#toggle + label { 
    display: inline-block; 
    background-color: white; 
} 

Теперь это просто вопрос использования класса :checked псевдо правильно.

/* by default, the menu should be hidden */ 
#menu { 
    height: 0px; 
    display: block; 
    /* removed other styling */ 
} 
/* when the checkbox is checked, hide the bars icon */ 
#toggle:checked + label i#bars{ 
    display: none; 
} 
/* and show the cross icon */ 
#toggle:checked + label i#cross{ 
    display: block; 
} 
/* and, of course, give the menu a height */ 
#toggle:checked ~ #menu { 
    height: 85px; 
} 

И вуаля! У вас есть меню, которое не использует JavaScript.Вот

fiddle

Answer 2

С одной стороны, вы должны предназначаться для ребенка, i, элемент. Кроме того, вы должны изменить класс (ы) на основании того, имеет ли элемент меню класс expanded.

(т. Е. $('#menu.expanded').length).

$('#show-menu').on('click', function (e) { 
    $('#menu').toggleClass('expanded'); 
    $('.label-show-menu i').removeClass().addClass(
     $('#menu.expanded').length ? 'fa fa-times fa-2x' : 'fa fa-bars fa-2x' 
    ); 
}); 

Updated Example

Кроме того, используйте .on() вместо .bind().

Начиная с jQuery 1.7, метод .on() является предпочтительным методом прикрепления обработчиков событий к документу. Для более ранних версий метод .bind() используется для привязки обработчика события непосредственно к элементам. Обработчики привязаны к выбранным в данный момент элементам в объекте jQuery, поэтому эти элементы должны существовать в точке, где происходит вызов в .bind(). Для более гибкой привязки событий см. Обсуждение делегирования событий в .on() или .delegate(). http://api.jquery.com/bind/

Answer 3

Я использую двойной toggleClass для <i> элемента

$('#show-menu').bind('click', function(e) { 
    $('#menu').toggleClass('expanded'); 
    $('.label-show-menu i').toggleClass('fa-times'); 
    $('.label-show-menu i').toggleClass('fa-bars'); 
}); 

http://jsfiddle.net/230d7stx/