Question

当点击菜单链接时，此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);
});

});

如何通过“动画”而不是“切换”来实现类似的效果？

提前感谢您的建议！

Answer 1

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

.slideToggle()和.fadeToggle()

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

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

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

这是你应该这样做的方式

var toggle = false;

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

这里有一个jsfiddle http://jsfiddle.net/BwKc9/1/

的工作示例

Answer 2

可能使用幻灯片*（）过渡？

   $('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

    });

Fiddle

Answer 3

如果您的浏览器支持CSS3，为什么不让CSS通过切换特定类来完成动画？

这很简单，a better choice。

查看此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;
}

它也很容易修改！为了好玩，让我们说你想在子菜单中缩放淡入幻灯片？这很容易，甚至我的祖母也可以这样做（有一点堆栈溢流搜索）！

查看FIDDLE。

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

将“toggle”替换为“animate”

3 个答案:

Fiddle