JQ邊欄動畫

Question

錯誤是，你需要按2點擊第一個「點擊這裏切換」工作良好。我可以如何解決它一鍵工作？

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

爲一邊向左元件的默認顯示值未被定義（在Windows 10與鉻/ IE/FireFox中的默認值是塊，而需要無）。根據MDN：

display CSS屬性指定用於元素的呈現框的類型。在HTML中，默認顯示屬性值取自HTML規範中描述的行爲或瀏覽器/用戶默認樣式表中的行爲。 XML中的默認值是內聯的。

將它添加到你的CSS：

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

的片段：

$('.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>