jQuery的動畫沒有留下工作

Question

這是我的代碼：

<script type='text/javascript' src='http://192.168.1.103/wordpress/wp-includes/js/jquery/jquery.js?ver=1.10.2'></script> 
<script type='text/javascript' src='http://192.168.1.103/wordpress/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script> 
<script type='text/javascript' src='http://192.168.1.103/wordpress/wp-content/themes/magazine-pro/js/entry-date.js?ver=1.0.0'></script> 
<script type='text/javascript' src='http://192.168.1.103/wordpress/wp-content/themes/magazine-pro/js/responsive-menu.js?ver=1.0.0'></script> 

<div class="site-container"> 
<nav class="nav-primary"> 
<div class="responsive-menu-icon"> 
</div> 
<div class="genesis-nav-menu"> 
</div> 
</nav> 
</div> 

在響應-menu.js

jQuery(function($){ 

    $(".nav-primary .genesis-nav-menu").addClass("responsive-menu").before('<div id="responsive-menu-icon"></div>'); 


    $("#responsive-menu-icon").click(function(){ 

     $(".site-container").animate({left:'200px'}, 400, 'easeOutBack'); 
     //$("nav .genesis-nav-menu").animate({width: 'toggle'}); 

    }); 
}); 

對於我的CSS，我有：

.nav-primary .responsive-menu { 
    display: none; 
    position: absolute; 
    top: 0; 
    left: 0; 
    } 

.nav-primary #responsive-menu-icon { 
    display: block; 
    text-align: center; 
} 

.site-container 
{ 
    overflow: hidden; 
    position: relative; 
    z-index: 2; 
    display:block; 
} 

但是，當我點擊他的按鈕，沒有任何反應。不知道我在做什麼錯在這裏.....

Answer 1

你需要改變：

$(".nav-primary .genesis-nav-menu").addClass("responsive-menu").before('<div id="responsive-menu-icon"></div>'); 

到：

$(".nav-primary .genesis-nav-menu").addClass("responsive-menu").before('<div class="responsive-menu-icon"></div>'); 

因爲你已經分配<div class="responsive-menu-icon">不<div id="responsive-menu-icon">

或者您可以在您的HTML標記中將<div class="responsive-menu-icon">更改爲<div id="responsive-menu-icon">