Question

我想为我的顶级导航设置动画。

目前，只有在徘徊在顶部导航链接时，下拉列表才会跳下来。

开发网站：http://goandco.w7.ext.starberry.com

我尝试了以下内容：

<script>
jQuery(document).ready(function() {
    jQuery( '.has-drop-down-a' ).hover(
        function(){
            jQuery(this).children('.drop').slideDown(200);
        },
        function(){
            jQuery(this).children('.drop').slideUp(200);
        }
    );
});
</script>

我的html类似于以下内容：

<ul id="nav">
   <li class="has-drop-down">
     <a href="#" class="has-drop-down-a">Search</a>
       <div class="drop">...</div>
   </li>
</ul>

我需要class =“drop”div来设置动画，而不是瞬间。

编辑：

所以，以下是有效的 - 除了两件事： 1）你必须将鼠标悬停在链接上一次，然后才能正常工作。 2）当你将鼠标向下移动到drop div上时，它会折叠

 <script>
        jQuery('body').ready(function() {
            jQuery( '.has-drop-down-a' ).hover(
                function(){
                    jQuery(this).siblings('.drop').slideDown(400);
                },
                function(){
                    jQuery(this).siblings('.drop').slideUp(400);
                }
            );
        });
        </script>

Answer 1

我在代码中看到的唯一问题是不要在'a'中包含'div drop'。

以下内容应该有效：

<ul id="nav">
    <li class="has-drop-down">
        <a href="#" class="has-drop-down-a">Search
            <div class="drop">...</div>
        </a>
    </li>
</ul>

小提琴：http://jsfiddle.net/61ewuhea/

修改

关于2个问题：

1）您必须设置要折叠的初始丢弃状态，为此，添加

$('.drop').slideUp(0);

到文件就绪功能。

2）要解决这个问题我强烈建议您遵循我的建议并将'div'置于'a'中并使用儿童代替兄弟姐妹。

为什么呢？因为，与您提供的网站不同，您需要动画，因此，您应该尝试仅为一个对象“制作动画”。这就是为什么它会崩溃，你说的是“当我将'a'，而不是'div'悬停时，它是有生命的。”

当你放置div INSIDE它不再崩溃，因为它是相同的元素。

在执行jsFiddle时出现的另一个问题是，你需要一个“桥”将'a'元素连接到'div'来执行此操作，我只是在.drop类中添加了一些css规则。 / p>
以下是完整的JavaScript代码：

jQuery('body').ready(function () { $('.drop').slideUp(0); jQuery('.has-drop-down-a').hover( function () { jQuery(this).children('.drop').slideDown(200); }, function () { jQuery(this).children('.drop').slideUp(200); } ); });

这是HTML：

<ul id="nav"> <li class="has-drop-down"> <a href="#" class="has-drop-down-a"> Search <div class="drop">...</div> </a> </li> </ul>

这是CSS：

.drop { background-color:#f00; position:relative; top:-1px; }

您可以在此处测试jsFiddle：http://jsfiddle.net/61ewuhea/1/

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

Answer 2

如果您查看http://api.jquery.com/slidedown/上的网站文档在1.4.3版中，您可以为函数添加更多内容。而不是：

jQuery(this).children('.drop').slideDown(200);

您可以添加更多变量：

jQuery(this).children('.drop').slideDown( [duration ] [, easing ] [, complete ] )

使用jQuery动画下拉列表

2 个答案: