我创建了一个在 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>
任何帮助将不胜感激,谢谢