動畫div元素在WordPress頂部用jQuery

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代碼：

<div id="nav-wrap"> 

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

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

這基本上我想要做什麼，除了從菜單的返回URL不起作用。我只是得到未定義的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; 
    }); 
});