クラスをボタンに追加/削除する

ボタンに新しいクラスを追加する際に問題があります。クラスをボタンに追加/削除する

サイドバーが閉じているときに、ボタンの矢印が右（fa-angle-right）に表示されている必要があります。開いているときにもう一度左に回してください。

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

クラスをボタンに追加/削除する

答えて

関連する問題