带有箭头的 jQuery 切换下拉菜单

Question

有使用 jQuery 切换打开的下拉菜单。由于某种原因，切换功能首先显示菜单，然后显示箭头。 我创建了一个 fiddle ，但下拉菜单在那里不起作用，但它在我的网站上有效。我该如何解决？

[http://jsfiddle.net/2dtg7xux/]

Answer 1

您的 fiddle 无法正常工作的原因是您没有将 jquery 添加为框架。为此，您必须单击 javascript 一词旁边的齿轮图标，然后选择 jquery 框架。

我通过将箭头从菜单中取出并使其在菜单动画之前立即执行自己的动画，使动画按预期工作。

这是标记。我添加了一个容器 div 来容纳箭头和子导航，箭头在顶部:

<li class="folder">
  <a href="#"  onClick="return false;">Folder</a>
  <div class="container">
    <div class="arrow"></div>
    <div class="subnav">
      <ul>
        <li><a href="#">Link1</a></li>
        <li><a href="#">Link2</a></li>
        <li><a href="#">Link3</a></li>
      </ul>
    </div>
  </div>
</li>

这是CSS。我使箭头具有相对位置，因此它相对于它的容器，然后调整位置以匹配它之前的位置，并将 z-index 更改为 1，以便它不在子导航的阴影下。我还把它设为“display: none”，所以它一开始是不可见的:

.subnav{
    display: none;
    position: absolute;
    background-color: #fff;
    border-radius: 5px;
    -webkit-box-shadow: 0px 0px 23px -2px #707070;
    -moz-box-shadow: 0px 0px 23px -2px #707070;
    box-shadow: 0px 0px 23px -2px #707070;
}
.subnav ul a {
  padding: 6px 20px;
}
.arrow {
    display: none;
    position: relative;
    left: 40px;
    top: 0;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #fff;
    z-index: 1;
}

这是 Javascript。它现在包括子导航动画之前的箭头动画:

$('.folder a').click(function(){
    $(this).next('.container').find('.arrow').slideToggle();
    $(this).next('.container').find('.subnav').slideToggle();
});    

这是调整后的 fiddle 的链接:

http://jsfiddle.net/05pyt1f6/