在 jQuery 中制作 UL 动画（导航）

发布于 2024-10-18 16:28:05 字数 561 浏览 2 评论 0原文

我使用 UL 和 CSS 制作了导航。子 ul 默认情况下是隐藏的 - 当将鼠标移动到父 LI（即菜单项）上时，我想通过向下滑动来显示子 UL。

实现这一目标的最佳方法是什么？

我目前有这段代码，想知道是否有更好的方法来做到这一点：

$("div.menu ul.children").each(function(i){
    var ul = $(this);
    var he = ul.height();
    ul.height(0);
    var li = ul.parent();
        li.bind("mouseenter", function(){
            ul.animate({height: he+'px'}, {queue:false, duration: 100});
        });
        li.bind("mouseleave", function(){
            ul.animate({height: '0px'}, {queue:false, duration: 100});
        });
    });

原文

I've made a navigation using an UL and CSS. The children ul's are hidden by default - when moving the mouse over the parent LI (i.e. the menu item), I'd like to display the children UL by sliding it down.

What's the best method to achieve this?

I'm currently having this code and was wondering if there's a better way to do it:

$("div.menu ul.children").each(function(i){
    var ul = $(this);
    var he = ul.height();
    ul.height(0);
    var li = ul.parent();
        li.bind("mouseenter", function(){
            ul.animate({height: he+'px'}, {queue:false, duration: 100});
        });
        li.bind("mouseleave", function(){
            ul.animate({height: '0px'}, {queue:false, duration: 100});
        });
    });

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

青巷忧颜 2024-10-25 16:28:05

类似的事情：

$(".togglevisibility")
  .mouseenter(function() {
    $(this).children("ul").slideDown();
  })
  .mouseleave(function() {
    $(this).children("ul").slideUp();
  });

请参阅 http://jsfiddle.net/xfkeM/

Something along these lines:

$(".togglevisibility")
  .mouseenter(function() {
    $(this).children("ul").slideDown();
  })
  .mouseleave(function() {
    $(this).children("ul").slideUp();
  });

See http://jsfiddle.net/xfkeM/

回复收藏 0 原文

~没有更多了~