JQ sidebar animate

Question

L'erreur est que vous devez appuyer sur 2 cliquez d'abord "Cliquez ici pour basculer" pour bien fonctionner.Comment puis-je le réparer pour travailler en un clic?

my code

$(function(){ 
    $('.mobicon').click(function(){ 
      if($('#aside-left').is(':hidden')){ 
       $('#aside-left').show(); 
       $('#aside-left').animate({'width':'100%'},'slow'); 
      } 
      else{ 
       $('#aside-left').animate({'width':'0%'},'slow',function(){ 
        $('#aside-left').hide(); 
       }); 
      } 


     }) 
}); 

Answer 1

La valeur d'affichage par défaut du côté gauche élément n'est pas défini (la valeur par défaut sur Windows 10 avec Chrome/IE/FireFox est bloc alors que vous avez besoin d'aucun). Selon MDN:

La propriété CSS d'affichage spécifie le type de boîte de rendu utilisé pour un élément. En HTML, les valeurs de propriétés d'affichage par défaut proviennent des comportements décrits dans les spécifications HTML ou de la feuille de style par défaut du navigateur/utilisateur. La valeur par défaut dans XML est inline.

Ajouter à votre css:

#aside-left { 
    display: none; 
    height: 100%; 
    top: 60px; 
    left: 0; 
    width: 0%; 
    position: fixed; 
    background: #111; 
    overflow: hidden; 
} 

L'extrait:

$('.mobicon').click(function() { 
 
    if ($('#aside-left').is(':hidden')) { 
 
     $('#aside-left').show(); 
 
     $('#aside-left').animate({'width': '100%'}, 'slow'); 
 
    } 
 
    else { 
 
     $('#aside-left').animate({'width': '0%'}, 'slow', function() { 
 
      $('#aside-left').hide(); 
 
     }); 
 
    } 
 
});

#aside-left { 
 
    display: none; 
 
    height: 100%; 
 
    top: 60px; 
 
    left: 0; 
 
    width: 0%; 
 
    position: fixed; 
 
    background: #111; 
 
    overflow: hidden; 
 
} 
 

 
.mobicon{ 
 
    cursor:pointer; 
 
    color:red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<div class="mobicon">Click Here To Toggle</div> 
 
<div id="aside-left">sidebar content here</div>