1 
<div id="nav" class="roundbox">
    <ul class="dropdown">
        <li class="dropdown"> <a href="#" class="dropdown-toggle">
            <div class="dashdiv">
            <label>
                <p align="center" style="font-weight: bold; margin-top: 0px; margin-bottom: 0px;" class="dash">&#9733;&#9733;&#9733;</p>
            </label>
            </div>
        </a>

            <ul class="dropdown-menu">
                <li class="t stuff"> <a href="#">Main</a>

                </li>
                <li class="e stuff"> <a href="#">News</a>

                </li>
                <li class="t stuff"> <a href="#">History</a>

                </li>
                <li class="e stuff"> <a href="#">Contact</a>

                </li>
                <li class="t"></li>
                <li class="e stuff"> <a href="http://www.graceland.edu" target="_blank">GU Site</a>

                </li>
                <li class="t"></li>
                <li class="e"></li>
                <li class="t"></li>
                <li class="e"></li>
                <li class="t"></li>
                <li class="e"></li>
                <li class="t"></li>
                <li class="e"></li>
                <li class="t"></li>
                <li class="e"></li>
                <li class="t"></li>
                <li class="e"></li>
                <li class="t"></li>
                <li class="e"></li>
                <li class="t"></li>
                <li class="e"></li>
                <li class="t"></li>
                <li class="e"></li>
                <li class="t"></li>
                <li class="e"></li>
                <li class="t"></li>
                <li class="e"></li>
                <li class="t"></li>
                <li class="e"></li>
                <li class="t"></li>
                <li class="e"></li>
                <li class="t"></li>
                <li class="e"></li>
                <li class="t"></li>
                <li class="e"></li>
                <li class="t"></li>
                <li class="e"></li>
                <li class="t"></li>
                <li class="e"></li>
            </ul>
            <div class="footdiv">
                <p class="foot1" style="font-weight: bold; margin-top: 0px; margin-bottom: 0px;"> <span class="time" style="vertical-align: middle;"></span>

                </p>
                <p class="foot" style="margin-top: 0px; margin-bottom: 0px;"> <span class="date"></span>

                </p>
            </div>
        </li>
    </ul>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
    $('li.dropdown').hover(
            function()
    {
            $(this).find('ul').stop().slideDown(2000);
        },
        function()
    {
            $(this).find('ul').stop().slideUp(2000);
        }
        )
</script>
</div>

所以......我正在尝试清理我的项目并且有一个需要解决的问题。我有一个 div，当它悬停在上面时，它会向下滑动以显示站点导航菜单，并在移出 div 时向上滑动。它工作得很好，但我唯一的疑虑是，如果我将鼠标悬停在 div 上，让它开始向下滑动，然后退出，然后在 div 向上滑动时重新进入，否则隐藏的菜单会显示，直到排队的 jquery 操作完成。这是我的jsFiddle。代码看起来有点毛茸茸，但你会明白的。我已经删除了尽可能多的代码，这样您就不必挖掘太多来查找项目。

我正在使用 jQuery 1.9.1。理想情况下，我希望看到的是菜单从向上滑动到向下滑动而不完全完成向上滑动功能。有任何想法吗？

4

1 回答 1

1

扩展和收缩的代码div如下：（在 jsFiddle 的 html 部分中找到）

<script>
$('li.dropdown').hover(
        function()
        {
            $(this).find('ul').stop().slideDown(2000);
        },
        function()
        {
            $(this).find('ul').stop().slideUp(2000);
        })
</script>

让我们稍微分析一下这段代码：

如果我们hover结束了li.dropdown，那么

function(){ $(this).find('ul').stop().slideDown(2000);  } //Will execute.

如果我们hover退出li.dropdown，那么

function(){ $(this).find('ul').stop().slideUp(2000); } //Will execute

因此，代码不涵盖“嵌套”动画。

有很多方法可以解决这个问题，但我认为最漂亮的方法是：

  <script>
      $('li.dropdown').hover(function()
      {
         $(this).find('ul').stop().slideToggle(2000);
      });
  </script>

您可以在这个 jsFiddle中找到一个工作示例。

我希望这能回答你的问题。

于 2013-07-27T10:35:31.613 回答