如何在jQuery中打开/关闭状态更改真棒图标简单切换侧边栏

如何更改此代码以制作令人敬畏的图标，将其从关闭改为打开，反之亦然。我的意思是，当侧边栏关闭后，我喜欢使用[fa-align-justify \ f039]真棒图标，当它打开时，我想显示[fa-times \ f00d]真棒图标。如何在jQuery中打开/关闭状态更改真棒图标简单切换侧边栏

如何做到这一点？

Here is code

<!DOCTYPE html> 
<html lang="en"> 

<head> 
     <title>toggleBar</title> 
     <meta charset="utf-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <link rel="stylesheet" href="css/style.css"> 

<script> 
    src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"> 
    src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> 
</script> 

</head> 

<body> 
    <!-- toggle-sidebar --> 
    <div id="style-selector"> 
     <div class="style-toggle"> 
     </div> 
     <div id="style-selector-container">  
      <div class="style-selector-wrapper"> 
       <h1>Content goes here!</h1> 
      </div> 
     </div> 
    </div> 


    <script type="text/javascript"> 

    jQuery(document).ready(function() { 
     if(jQuery('body').hasClass('home')){ 
      jQuery('#style-selector').animate({'right':'0px'},'slow'); 
      } else { 
       jQuery('body').addClass('ss-open'); 
       jQuery('#style-selector').animate({'right':'-'+jQuery('#style-selector').width()+'px'},'slow'); 
      } 
     }); 

     jQuery('#style-selector .style-toggle').click(function(e){ 
      e.preventDefault(); 
      if(jQuery('body').hasClass('ss-close')){ 
       jQuery('body').removeClass('ss-close'); 
       jQuery('body').addClass('ss-open'); 
      jQuery('#style-selector').animate({'right':'-'+jQuery('#style-selector').width()+'px'},'slow'); 
     } 
     else if(jQuery('body').hasClass('ss-open')) { 
      jQuery('body').removeClass('ss-open'); 
      jQuery('body').addClass('ss-close'); 
      jQuery('#style-selector').animate({'right':'0px'},'slow'); 
     } 
     else { 
      jQuery('body').addClass('ss-open'); 
      jQuery('#style-selector').animate({'right':'-'+jQuery('#style-selector').width()+'px'},'slow'); 
     } 
    } 
    ); 

</script> 
<!-- end toggle sidebar --> 

</body> 
</html> 


/* STYLE.CSS Toggle Sidebar */ 

#style-selector { 
    position: fixed; 
    right: 0; 
    top: 0; 
    z-index: 100000; 
    -webkit-box-shadow: -3px 0px 50px -2px rgba(0,0,0,0.14); 
    -moz-box-shadow: -3px 0px 50px -2px rgba(0,0,0,0.14); 
    box-shadow: -3px 0px 50px -2px rgba(0,0,0,0.14); 
    background: #fff; 
    height: 100%; 
    width: 280px; 
} 

#style-selector .style-toggle { 
    width: 52px; 
    height: 56px; 
    cursor: pointer; 
    opacity: 1; 
    background: #fff; 
    -moz-border-radius: 5px 0px 0px 5px; 
    -webkit-border-radius: 5px 0px 0px 5px; 
    border-radius: 5px 0px 0px 5px; 
    -webkit-box-shadow: -3px 0px 5px -2px rgba(0,0,0,0.14); 
    -moz-box-shadow: -3px 0px 5px -2px rgba(0,0,0,0.14); 
    box-shadow: -3px 0px 5px -2px rgba(0,0,0,0.14); 
    float: left; 
    margin-left: -52px; 
    margin-top: 150px; 
    top: 100px; 
} 

#style-selector .style-toggle::before { 
    color: #f05254; 
    content: "\f07a"; 
    font-family: fontawesome; 
    font-size: 23px; 
    font-weight: lighter !important; 
    line-height: 56px; 
    text-align: center; 
    padding-left: 15px; 
} 

#style-selector .style-toggle:hover:before { 
    color: #06a0b0; 
} 

#style-selector-container { 
    height: 100%; 
    overflow-x: hidden; 
    overflow-y: auto; 
    -webkit-transition: all 0.5s; 
    transition: all 0.5s; 
    padding: 15px; 
}

来源

2017-10-13 Krsna

这是你要实现的目标是什么？ https://jsfiddle.net/1p2a3jjx/5/ – UncaughtTypeError

只需添加content: "\f00d";将显示x当类ss-close活跃https://jsfiddle.net/1p2a3jjx/2/

.ss-close #style-selector .style-toggle:before{ 
    content: "\f00d"; 
}

来源

2017-10-13 12:52:24

嗨Awsme桑迪。 – Krsna

嗨@Krsna有什么问题吗？ –

正是我在找什么。一个简单，直接和美丽的解决方案！代码是诗歌。 – Krsna

如何在jQuery中打开/关闭状态更改真棒图标简单切换侧边栏

回答

相关问题