jQuery 사이드 메뉴 클릭시 Gyphicon 변경 토글

Question

jQuery 사이드 메뉴 토글이 있습니다.

$('#open').click(function() { 
 
    $(this).find('i').toggleClass('glyphicon-align-justify').toggleClass('glyphicon-remove'); 
 
    $('.sidebar').toggleClass('active'); 
 
}) 
 

 
$(document).click(function(e) { 
 
    var sidebar = $(".sidebar, #open"); 
 

 
    if (!sidebar.is(e.target) && sidebar.has(e.target).length === 0) { 
 
    $('#open').find('i').toggleClass('glyphicon-align-justify').toggleClass('glyphicon-remove'); 
 
    sidebar.removeClass('active'); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<!-- Optional theme --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
 

 
<!-- Latest compiled and minified JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
<li class="topHeaderMenu leftMenu listMenu" id="open"> 
 
    <div class="listMenuDiv"><i class="glyphicon2 glyphicon-align-justify"></i></div> 
 
</li> 
 

 
<div class="sidebar"> 
 
    sidebar content 
 
</div>

그래서, 때 나는 #open 다음 사이드 바 열립니다 클릭합니다.
문제는 사이드 바
가까운 방법은 문서 클릭에 glyphicon-align-justify를 유지하는 경우 사이드 오픈
및 glyphicon-align-justify에 glyphicon-remove을 할 경우 (현재의 I/몸이 glyphicon-remove로 변경됩니다 외부를 클릭하면) glyphicon-remove에 glyphicon-align-justify 변경하는 방법입니다

Answer 1

스크립트 대체

$('#open').click(function() 
    { 
     $(this).find('i').toggleClass('glyphicon-align-justify').toggleClass('glyphicon-remove'); 
     $('.sidebar').toggleClass('active'); 
    }) 

    $(document).click(function(e) 
    { 
    if($(".sidebar.active").length > 0){ 


     var sidebar = $(".sidebar, #open"); 

     if(!sidebar.is(e.target) && sidebar.has(e.target).length === 0) 
     { 
      $('#open').find('i').toggleClass('glyphicon-align-justify').toggleClass('glyphicon-remove'); 
      sidebar.removeClass('active'); 
     } 
    } 

    });