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-removeにglyphicon-align-justify変更を行う方法であると
サイドバーに近いとどのように（私は外/ボディをクリックした場合、それはglyphicon-removeに変わります現在）のドキュメントクリックでglyphicon-align-justifyを維持する場合glyphicon-align-justifyにglyphicon-removeを作る

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'); 
     } 
    } 

    });