带有箭头的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/