Question

我想创建一个基于this:

的菜单系统

当你回到索引页面时，想法是将菜单固定在底部，浮动到浏览器窗口的顶部，当按下任何菜单项时（从索引），反之亦然。我希望菜单固定在除索引之外的所有子页面的顶部。

我创建了一个示例here，可能更容易理解我的意思。在这个例子中，我正在使用这个jQuery代码：

    $('#nav-wrap').click(function(event) {

    var url = $(this).attr('href');

    $('#nav-wrap').animate({
        bottom: ( $(window).height() - $("#nav-wrap").height() )
    }, 2000, function(){

    document.location = $(this).attr('href');

    });
    return false;
})

HTML code：

<div id="nav-wrap">

        <nav>
    <?php wp_nav_menu( array('theme_location' => 'footer-menu')); ?>
        </nav>

</div><!--#nav-wrap -->

这基本上做了我想要的，除了菜单中的返回网址不起作用。我只是得到了未定义的url，正如你在上面的例子中看到的那样。有谁知道如何解决这个问题或者更好的解决方案？

提前致谢。

Answer 1

问题是在你的事件处理程序中，this引用div＃nav-wrap，它没有href属性。

将处理程序附加到锚标记：

$('#nav-wrap a').click(function(event) {
  event.preventDefault();
  var href= $(this).attr('href');

  $('#nav-wrap').animate({
    bottom: ( $(window).height() - $("#nav-wrap").height() )
  }, 2000, function(){
    document.location = href;
  });
});

使用jQuery在WordPress中从下到上为div元素设置动画

1 个答案: