将 jquery 动画/过渡添加到菜单下拉菜单答案

【问题标题】：Add jquery animation/transition to menu dropdown将 jquery 动画/过渡添加到菜单下拉菜单
【发布时间】：2016-04-13 15:24:50
【问题描述】：

我有一个位于here.的小提琴

点击后的前几个菜单项有下拉菜单。我一生都无法弄清楚如何为持续 1 到 2 秒的下拉菜单添加动画/过渡。我希望它平滑地向下滑动，而不仅仅是单击并在那里。如果有人可以提供帮助，我将不胜感激。

<ul id="nav">
<li class="parent"><a class="nav-top" href="#">Web Design <i class="fa fa-angle-double-down"></i></a>
    <ul class="sub-nav">
        <li><a class="nav-top" href="#">Self Storage Websites</a></li>
        <li><a class="nav-top" href="#">Responsive Websites</a></li>
    </ul>
</li>
<li class="parent"><a class="nav-top" href="#">Internet Marketing <i class="fa fa-angle-double-down"></i></a>
    <ul class="sub-nav">
        <li><a class="nav-top" href="#">Real SEO</a></li>
        <li><a class="nav-top" href="#">PPC (Pay Per Click) Ads</a></li>
        <li><a class="nav-top" href="#">Social Media Marketing</a></li>
    </ul>
</li>
<li class="parent"><a class="nav-top" href="hosting.html">Website Hosting</a></li>
<li class="parent"><a class="nav-top" href="#">About Us <i class="fa fa-angle-double-down"></i></a>
    <ul class="sub-nav">
        <li><a class="nav-top" href="#">About EiD</a></li>
        <li><a class="nav-top" href="#">Careers</a></li>
    </ul>
</li>
<li class="parent"><a class="nav-top" href="hosting.html">Contact Us</a></li>

   $(document).ready(function() {
        $('.parent').click(function() {
            $(".parent").not(this).find(".sub-nav").removeClass('visible');
            $(this).find('.sub-nav').toggleClass('visible');
        });
    });

【问题讨论】：

标签： jquery drop-down-menu jquery-animate transition

【解决方案1】：

我添加了 jquery slideUp 和 slideToggle 函数来提供滑动效果。

$(document).ready(function() {
  $('.parent').click(function() {
    $(".parent").not(this).find(".sub-nav").removeClass('visible').slideUp();
    $(this).find('.sub-nav').toggleClass('visible').slideToggle();
  });
});

并从 css 中的 visible 类中删除了 display:blockproperty。

请参考fiddle

【讨论】：