Question

我有一个切换按钮，使用条形字体Awesome图标，我正在使用：after伪类将左侧插入符号添加到条形图的左侧。当我点击按钮时，我希望左侧插入符号消失，右侧插入一个右侧插入符号。在One Codex Beta Site上可以看到这个功能的一个例子（在那个站点上，它从条形图右侧的右侧插入符号开始，而我从条形图左侧的左侧插入符号开始）。

我已经用Google搜索了如何做到这一点的帮助，但我无法按照我的意愿让它工作。任何想法将不胜感激。谢谢！

HTML

<div id="header" class="navbar navbar-default navbar-static-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-collapse">
                    <span class="sr-only">Toggle Navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <div id="logo" class="navbar-brand">
                    <button type="button" id="toggleSidebar">
                        <i class="navbar-icon fa fa-bars icon"></i>
                    </button><a href="index2.html" class="brand noline" title="Home">Brand</a></div>
            </div>
            <div class="collapse navbar-collapse" id="nav-collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li id="nav-join"><a href="#" id="join" title="Join">Sign Up</a></li>
                    <li id="nav-signin"><a href="#" id="sign-in" title="Sign In">Sign In</a></li>
                    <li id="nav-about-us"><a href="#" id="about-us" title="About Us">About Us</a></li>
                </ul>
            </div>
        </div>
    </div>

JS

$(document).ready(function(){
            $.asm = {};
            $.asm.panels = 2;

            $('#toggleSidebar').click(function(){
                if ($.asm.panels === 1) {
                    $('#content').attr({'class': 'products col-lg-9'});
                    $('#sidebar').show();
                    $.asm.panels = 2;
                } else {
                    $('#content').attr({'class': 'col-lg-12'});
                    $('#sidebar').hide();
                    $.asm.panels = 1;
                }
            });
        });

CSS

.fa-bars:after {
  content: "\f0d9";
  float: left;
  padding-right: 5px;
}

#content {
    background-color: gray;
    padding: 0px;
    height: 100px;
}

这是我的JSFiddle

Answer 1

我不知道你最初设置.fa-bars的方式是怎么回事，但我会在jQuery逻辑中添加/取出CSS类。我已经重写了你的＃toggleSidebar.change函数：

$('#toggleSidebar').click(function(){
            if ($.asm.panels === 1) {
                $('#content').attr({'class': 'products col-lg-9'});
                $('#sidebar').show();
                $('.fa-bars').removeClass('i-right-caret').addClass('i-left-caret');
                $.asm.panels = 2;
            } else {
                $('#content').attr({'class': 'col-lg-12'});
                $('#sidebar').hide();
                $('.fa-bars').removeClass('i-left-caret').addClass('i-right-caret');
                $.asm.panels = 1;
            }
        });

＆＃34; i-right-caret＆＃34;和＆＃34; i-left-caret＆＃34;是确定插入符号的字体很棒的类（我认为通常有一个＆＃39; fa＆＃39;在那里？我不确定）。

按钮切换使用：之前：之后使用Font Awesome Icons

1 个答案: