如何将淡入淡出效果或幻灯片效果添加到子菜单中ul

我试图将Jquery效果或CSS淡入淡出效果/幻灯片添加到我的子菜单中，但似乎无法使其工作。 ul子导航被设置为在我的CSS中没有显示。然后当你点击带有类下拉菜单的'a'标签时，它会添加类'display-sub-menu'这个子元素（现在，我的CSS中的显示块）。我的代码如下所示;如何将淡入淡出效果或幻灯片效果添加到子菜单中ul

HTML：

<ul class="nav-list"> 
    <li><a href="index.html">Home</a></li> 
    <li> 
     <a class="dropdown-toggle" title="About Us">About Us</a> 
     <ul> 
      <li><a href="about-us.html">About Our Business</a></li> 
      <li><a href="meet-the-team.html">Meet The Team</a></li> 
     </ul> 
    </li> 
</ul>

我jQuery是如下：

$('a.dropdown-toggle').click(function(e) { 
    $(this).next().toggleClass('display-sub-menu', 250); 
});

目前这只是隐藏和显示。没有幻灯片的效果，如果我使用的slideToggle等

来源

2015-09-04 Al-76

而是触发类的，你可以使用.fadeToggle()/.slideToggle()与淡入淡出切换/滑动

也是这两种方法需要持续时间参数，你可以传递250作为参数：

$('a.dropdown-toggle').click(function (e) { 
    $(this).next().fadeToggle(250); 
});

或

$('a.dropdown-toggle').click(function (e) { 
    $(this).next().slideToggle(250); 
});

Working Demo

来源

2015-09-04 11:06:20

这很好，谢谢你的帮助。但是，获得真正的跳跃效果。它淡入淡出，但在淡出完成后，我会迅速崩溃。谢谢:) –

@AlySebastien：你可以根据需要修改持续时间参数。 –

是的，滑动切换应该很容易，但由于某种原因，在我的项目中不滑动。（虽然在演示链接中没问题） –

如何将淡入淡出效果或幻灯片效果添加到子菜单中ul

回答

相关问题