jquery从外部html加载菜单但动画不起作用

Question

我创建了一个在 jquery 中向下滑动的导航。它工作得很好，但是我希望将菜单（无序列表）放在一个单独的 html 文件中，以便在更改时在我的所有网站页面中实现。

我使用以下代码将html文件加载到div“menucontainer”中

$(document).ready(function(){

$( "#menucontainer" ).append(

   $( '<div>' ).load( 'navigation.html' )
    );
});

显示菜单的顶层，但是当我将鼠标悬停在菜单上时，子菜单不再向下滑动

这里是动画代码

 $("#nav li").hoverIntent({sensitivity: 7, interval: 10, over: showNav, timeout: 20, out: hideNav});

 function showNav() {
 $("ul", this).slideDown(500);

 }

 function hideNav() {   
 $("ul", this).stop(true, true).slideUp(500);

 };

这里是navigation.html

<ul id="nav">
    <li id= "1"><a href="#">CARS</a>
    <ul>
    <li id= "11"><a href="#" class="clicked_link">Link1</a></li>
    </ul></li>
    <li id= "2"><a href="#" class=>NEWS / EVENTS</a>
        <ul>
            <li id= "21"><a href="#" class="clicked_link">Latest News</a></li>
            <li id= "22"><a href="#" class="clicked_link">Upcoming Events</a></li>
            <li id= "23"><a href="#" class="clicked_link">Calendar</a></li>
            <li id= "24"><a href="#" class="clicked_link">Research and Development</a></li>
        </ul>
        <div class="clear"></div>
    </li>
    <li id= "3"><a href="#" class=>SERVICES</a>
    <ul>
        <li id= "31"><a href="#" class="clicked_link">Dealer Locator</a></li>
        <li id= "32"><a href="#" class="clicked_link">Hire Cars</a></li>
        <li id= "33"><a href="#" class="clicked_link">Finance</a></li>
        <li id= "34"><a href="#" class="clicked_link">Insurance</a></li>
        <li id= "35"><a href="#" class="clicked_link">Used Car Locator</a></li>
        <li id= "36"><a href="#" class="clicked_link">Factory Visits</a></li>
        <li id= "37"><a href="#" class="clicked_link">Chassis Records</a></li>
        <li id= "38"><a href="#" class="clicked_link">Contact Us</a></li>
    </ul>         
        <div class="clear"></div>
    </li>
    <li id= "4"><a href="#" class=>MEDIA</a>
    <ul>
        <li id= "41"><a href="#" class="clicked_link">Video</a></li>
        <li id= "42"><a href="#" class="clicked_link">Images</a></li>
        <li id= "43"><a href="#" class="clicked_link">Press Releases</a></li>
    </ul>         
        <div class="clear"></div>
    </li>
    <li id= "5"><a href="#" class=>SHOP</a>
    <ul>
        <li id= "51"><a href="#" class="clicked_link">Online Store</a></li>
    </ul>         
        <div class="clear"></div>
    </li>


</ul>

任何帮助将不胜感激，谢谢

Answer 1

看起来您是在页面上实际存在项目之前附加这些事件。

您可以通过检查此选择器的长度轻松测试是否是这种情况：

$("#nav li").length // probably == 0

试试这个：

$(function(){
    $("#menucontainer").load("navigation.html", function() {
        $("#nav li").hoverIntent({ 
            sensitivity: 7, 
            interval: 10, 
            over: showNav, 
            timeout: 20, 
            out: hideNav
        });
    });
});

function showNav() {
    $(this).find("ul").slideDown(500);
}

function hideNav() {   
    $(this).find("ul").stop(true, true).slideUp(500);
};

---

您可以将回调传递给load() 方法，该方法将在加载完成后触发。

.load( url, [data], [complete(responseText, textStatus, XMLHttpRequest)] )