我的下拉菜单中有以下jquery代码:
var active = 0;
$(document).ready(function(){
jQuery("#dropmenu ul").css({display:"none"});
// For 1 Level
jQuery("#dropmenu li:has(ul) a").append('');
jQuery("#dropmenu li ul a span").text('');
// For 2 Level
jQuery("#dropmenu li ul li:has(ul) a").append('');
jQuery("#dropmenu li ul li ul a span").text('');
jQuery("#dropmenu li").hover(function(){
if(active != 1){
jQuery($('.active').parent()).find("ul:first").css('display', 'none');
jQuery(this).find("ul:first").fadeIn('fast');
active = 1;
}
},
function(){
jQuery(this).find("ul:first").fadeOut('fast');
jQuery($('.active').parent()).find("ul:first").fadeIn('fast');
active = 0;
}); });
//ACTIVATE
$(document).ready(function(){
jQuery($('.active').parent()).find("ul:first").css('display', 'block');
});
代码的作用是检查并查看哪个元素具有active
类,并在页面加载时显示它。
HTML看起来像这样:
<ul id="dropmenu">
<li><a class="active" href="index.php">home</a>
<ul>
<li><a href="#">Euro 2012</a></li>
<li><a href="#">FIA Cup</a></li>
<li><a href="#">Previous Events</a></li>
<li><a href="#">Event 2012-2013</a></li>
<li class="last"><a href="#">Pre Season</a></li>
</ul>
</li>
<li><a href="#" >home</a></li>
<li><a href="#">blabl</a></li>
<li><a href="#">dropdown</a>
<ul>
<li><a href="#">Euro 2012</a></li>
<li><a href="#">FIA Cup</a></li>
<li><a href="#">Previous Events</a></li>
<li><a href="#">Event 2012-2013</a></li>
<li class="last"><a href="#">Pre Season</a></li>
</ul>
</li>
<!-- ... -->
</ul>
现在,当页面加载默认下拉菜单时,如果您将鼠标悬停在其他菜单项上,如果它们没有下拉菜单,则会显示默认值并隐藏,如果您快速浏览菜单项,则将继续重复动画。如何避免重复动画,如何在菜单为空时避免显示默认菜单?
答案 0 :(得分:1)
我说废弃这个,并寻找那样做的脚本,如果你只是花时间去谷歌有很多,这里有一个有用的链接:
http://vandelaydesign.com/blog/web-development/jquery-drop-down-menus
我个人使用这个插件来制作下拉菜单:
http://filamentgroup.com/lab/jquery_ipod_style_and_flyout_menus/
你可以在html和css的帮助下用这个插件做很多事情来制作一行下拉菜单......插件使用jQuery和jQuery UI进行设计,你可以根据需要定制它,这里是如果您还没有访问jQueryUI网站,请访问:http://www.jqueryui.com/themeroller