jQuery带有箭头的下拉菜单

Question

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

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

Answer 1

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

通过将箭头从菜单中移出，并在对菜单进行动画处理之前使它自己进行动画处理，使动画达到了预期的效果。

这是标记。 我添加了一个容器div来同时容纳箭头和subnav，并且箭头位于顶部：

<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，以使其不在subnav的阴影下方。 我也将其设置为“显示：无”，因此它开始不可见：

.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。 现在，它在subnav的动画之前包括箭头的动画：

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

这是调整后的小提琴的链接：

http://jsfiddle.net/05pyt1f6/