帶有箭頭的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/