0

我的下拉菜单有以下 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>

现在，当页面加载时，会显示默认下拉菜单，但是一旦您将鼠标悬停在其他菜单项上，如果它们没有下拉菜单，它将显示默认菜单并隐藏，如果您快速浏览菜单项，它将继续重复动画。如何避免动画的重复以及菜单为空时如何避免显示默认菜单？

4

1 回答 1

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

于 2012-06-26T03:34:34.497 回答