0

当单击菜单链接时，此 jQuery 片段显示或隐藏子菜单项：

jQuery(document).ready(function($) {

$('.main-navigation ul li a').click(function() {
   var li = $(this).closest('li');
   if(li.has('ul'))
        li.find('ul').toggle(100);
});

});

使用“动画”而不是“切换”如何实现类似的效果？

提前感谢您的建议！

4

3 回答 3

1

您可以使用几个预定义的切换，例如

.slideToggle()和.fadeToggle()

或者你可以使用这种方式来切换动画

$('.main-navigation ul li a').toggle(
function()
{
  $('#something').animate({
    height: "100"
  }, 500);
},
function()
{
  $('#something').animate({
    height: "200"
  }, 500);
});

由于.toggle()不推荐使用 2 个处理程序

这是你应该这样做的方式

var toggle = false;

$('#foo').click(function() {
  if (toggle) {
    $("#bar").hide();
  } else {
    $("#bar").show();
  }
  toggle = !toggle;
});

在这里，您在 jsfiddle http://jsfiddle.net/BwKc9/1/中有一个工作示例

于 2013-05-21T16:20:01.370 回答
1

可能是使用 slide*() 转换的东西？

   $('ul li a').click(function () {
    var li = $(this).closest('li');
    var ul;
    if (li.has('ul')) {
       ul = li.find('ul').slideToggle('slow');  // SlideToggle this to slideUp/down based on current state.
     }
        $('ul.subMenu:visible').not(ul).slideUp('slow');//slideUp all other menus

    });

小提琴

于 2013-05-21T16:29:56.397 回答
1

如果你的浏览器支持 CSS3，为什么不让 CSS 通过切换一个特定的类来做动画呢？

这真的很容易，而且是更好的选择。

看看这个FIDDLE。

我在您的代码中所做的所有更改是：

jQuery(document).ready(function($
    $('ul li').click(function() {
       var li = $(this).closest('li');
       if(li.has('ul'))
           li.find('ul').toggleClass('open'); // <- this line!
    });
});

现在，您可能已经猜到open该类打开了子菜单。由于这个简短的 css 片段，它正在下滑：

ul li > ul {
    max-height: 0;  
    transition: all 1s;
}

ul li > ul.open {
    max-height: 140px;
}

而且它真的很容易修改！为了好玩，假设您想在子菜单中缩放-淡入-滑动？这太容易了，即使是我的祖母也能做到（只需一点 stackoverflow 搜索）！

检查一下FIDDLE。

现在，如果您想使用它，您可能需要在 CSS3 属性中包含所有必要-ms-的-o-、-moz-和前缀。-webkit-

于 2013-05-21T16:53:35.980 回答