Twitter

@carrielis 可以的

jQuery 实现下拉菜单方法

in Javascript // 22 Comments

用 JavaScript 或是 jQuery 实现下拉菜单的方法很多人都讨论过了，对我而言是算一个笔记，也算是在写主题中遇到的问题拿出来说一说吧。以前写主题很少对下拉菜单下过功夫，就算到后来也只是用 CSS 写，没有动画效果，而且在 IE6 下是不会有显示的，在写 DarkLight 3.0 的时候，想用 jQuery 实现下拉菜单，然后遇到点问题。

我开始是这样写代码的（下拉+淡入淡出效果）：

jQuery(document).ready(function($) {
    $("#nav > li").hover(function() {
        $(this).children(".children").animate({opacity: "show", height: "show"}, "slow");
    }, function() {
        $(this).children(".children").animate({opacity: "hide", height: "hide"}, "100");
    });
});

然后问题出现了，看 Demo，但鼠标滑过菜单，然后向下滑的时候，下拉菜单在不断的重复向上向下的淡入淡出动作。用 .stop() 方法行不通，google 之，在 zwwooooo 那发现了个方法，加个判断语句 if (!$(this).children(".children").is(":animated"))，就是说，在鼠标滑过没有在执行动画动作的菜单时才会执行动作，那么用 .filter(":not(:animated)") 筛选出没有在执行动画的菜单来实现也一样：

jQuery(document).ready(function($) {
    $("#nav > li").hover(function() {
        $(this).find(".children").filter(":not(:animated)").animate({opacity: "show", height: "show"}, "slow");
    }, function() {
        $(this).find(".children").animate({opacity: "hide", height: "hide"}, "100");
    });
});

再看看 Demo，问题解决了。

多级下拉菜单方法请查看 jQuery 实现多级下拉菜单

22 responses to jQuery 实现下拉菜单方法

  7. Bryan / August 26, 2010 / Reply

    将jQuery menu加紧下个版本的G-WHITE吧~~G-WHITEnavigation太简陋了
    我自己加了个featured post幻灯片和在side bar加了个TAB 哈哈

    • Alan / August 26, 2010 / Reply

      @Bryan: 的确简陋了点，等下个版本吧，正在搞 DarkLight 3.0，呵呵。其实你已经改的很个性了


  12. Warning: printf() [function.printf]: Too few arguments in /home/alanoy/public_html/wp-content/themes/touch5/functions.php on line 35
    / December 20, 2011 / Reply

    谢谢，hover次数累加的问题解决了，
    不过对这一句十分的不解…
    .filter(“:not(:animated)”)

  13. Alan / December 20, 2011 / Reply

    @陪心看海 可以多看看 jQuery API。
    :animated – Select all elements that are in the progress of an animation at the time the selector is run

Leave a Reply

Go Top