向按鈕添加/刪除類

我在向按鈕添加新類時出現問題。向按鈕添加/刪除類

側欄關閉時，按鈕箭頭應該顯示爲右（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>

(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"); 
     } 

    }); 

})();

來源

2017-04-07 Rokas

錯字在你的代碼：'$（「＃sidebarToogle i.fa」）;'元素上的ID是'sidebarToggle'。進行更改並且工作正常。在那個筆記上，我正在投票結束印刷錯誤。 –

夫婦的事情時，你應該使用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>

來源

2017-04-07 19:19:09 Neil

Upvoted分享最佳實踐以及解決OP詢問的問題。 –

我一定很累...... @nfn尼爾，謝謝。 – Rokas

你的拼寫錯誤sidebarToggle -_-

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

來源

2017-04-07 19:22:08

向按鈕添加/刪除類

回答

相關問題