JQuery загружает меню из внешнего HTML, но анимация не будет работать - PullRequest
Новая
       42

JQuery загружает меню из внешнего HTML, но анимация не будет работать

0 голосов
/ 31 августа 2011

Я создал навигацию, которая скользит вниз в 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);

 };

Вот навигация.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>

Любая помощь будет принята с благодарностью, спасибо

1 Ответ

2 голосов
/ 31 августа 2011

Похоже, что вы присоединяете эти события до того, как элементы действительно появятся на странице.

Вы можете легко проверить, так ли это, проверив длину этого селектора: 

$("#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)] )
...