클래스에 버튼 추가/제거

버튼에 새 클래스를 추가하는 데 문제가 있습니다.클래스에 버튼 추가/제거

사이드 바가 닫히면 버튼 화살표가 오른쪽 (파 각도 오른쪽)으로 표시되어야합니다. 그리고 열려있을 때 (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

클래스에 버튼 추가/제거

답변

관련 문제