切换时更改font-awesome图标

Question

当我的菜单切换时，我一直试图找到一种方法将此图标更改为fa-times，然后在菜单切换回/关闭时更改回fa-bars。

我已经尝试了一些代码，他们已经在这个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的菜单。 这是一个

小提琴

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'
    );
});

更新的示例

另外，使用.on()而不是.bind() 。

从jQuery 1.7开始，.on（）方法是将事件处理程序附加到文档的首选方法。 对于早期版本，.bind（）方法用于将事件处理程序直接附加到元素。 处理程序附加到jQuery对象中当前选定的元素，因此这些元素必须存在于调用.bind（）的位置。 有关更灵活的事件绑定，请参阅.on（）或.delegate（）中对事件委派的讨论。 http://api.jquery.com/bind/

Answer 3

我为<i>元素使用double toggleClass

$('#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/