0

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>

どんな助けでも大歓迎です、ありがとう

4

1 に答える 1

2

アイテムが実際にページに存在する前に、これらのイベントを添付しているようです。

このセレクターの長さをチェックすることで、これが当てはまるかどうかを簡単にテストできます。

$("#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)] )
于 2011-08-31T13:32:20.893 に答える