Question

添加/删除按钮类

2017-04-07

2801

jquery html font-awesome

我在向按钮添加新类时遇到问题。

侧边栏关闭时，按钮箭头应显示为右侧（fa-angle-right）。当侧边栏打开时，按钮箭头再次显示为左侧（fa-angle-left）。

HTML

 <div>
    <button id="sidebarToggle" class="btn btn-primary btn-sm">
     <i class="fa fa-angle-left"></i>
     </button>
 </div>

JS

(function() {

    var $sidebarAndWrapper = $("#sidebar, #wrapper");
    var $icon = $("#sidebarToogle i.fa");

    $("#sidebarToggle").on("click", function () {
        $sidebarAndWrapper.toggleClass("hide-sidebar");
        if ($sidebarAndWrapper.hasClass("hide-sidebar")) {
            $icon.removeClass("fa-angle-left");
            $icon.addClass("fa-angle-right");
        } else {            
            $icon.addClass("fa-angle-left");
            $icon.removeClass("fa-angle-right");
        }

    });

})();

Answer 1

有几件事，您应该使用 toggleClass 来切换类，它更简洁。此外，我会使用相对选择器 .find ，以便您可以支持多个按钮。为了解决这个问题，您输入了 sidebarToggle 。修复拼写错误后，它就正常工作了。

(function() {
    var $sidebarAndWrapper = $("#sidebar, #wrapper");

    $("#sidebarToggle").on("click", function () {
        $sidebarAndWrapper.toggleClass("hide-sidebar");
        $(this).find("i.fa").toggleClass("fa-angle-left").toggleClass("fa-angle-right");
        
    });
})();

/* minified because I only changed JavaScript */

#main{background-color:#aea9a9;padding:4px;margin:0}#footer{background-color:#808080;color:#eee;padding:8px 5px;position:fixed;bottom:0;width:100%}.headshot{max-width:50px;border:1px solid #808080;padding:3px}.menu{font-size:12px;color:aquamarine}.menu li{list-style-type:none}.menu li.active{font-weight:bold}#sidebar{background:#525050;color:aliceblue;position:fixed;height:100%;width:250px;overflow:hidden;left:0;margin:0;transition:left ease .35s}#sidebar.hide-sidebar{left:-250px;transition:left ease .35s}#wrapper{margin:0 0 0 250px;transition:margin-left ease .35s}#wrapper.hide-sidebar{margin-left:0}

<!-- minified because I only changed JavaScript -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><body> <div id="sidebar"> <span id="username"></span> <ul class="menu"> <li class="active"><a asp-controller="App" asp-action="Index">Home</a></li><li><a asp-controller="App" asp-action="About">About</a></li><li><a asp-controller="App" asp-action="Contact">Contact</a></li></ul> </div><div id="wrapper"> <div id="main"> <div> <button id="sidebarToggle" class="btn btn-primary btn-sm"> <i class="fa fa-angle-left"></i> </button> </div><div> <h2>The world</h2><p>This will be a fun website soon!</p><form> <div> <label>Date</label> <input/> </div><div> <label>Location</label> <input/> </div><div><input type="submit" value="Add"/></div></form> </div></div><div id="footer"> <h5> &copy; 2017 The World Ltd.</h5> </div></div><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> <script type="text/javascript" src="~/js/site.js"></script></body>

Answer 2

您的 sidebarToggle 拼写错误 -_-

var $icon = $("#sidebarToggle i.fa");

Dan Philip Bejoy

2017-04-07