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>

在responsive-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">

jQuery动画留下不起作用

1 个答案: