jQuery Accordion Menu

Question

這只是一個真正的新手問題，但我只是用它來創建一個簡單的手風琴菜單。該HTML輸出中是這樣的：

<ul id="nav-sub"> 
<li class="sub-level-0"><a href="#">Menu Item One</a></li> 
<li class="parent-here last sub-level-0"><a href="#">Menu Item Two</a> 
    <ul> 
     <li class="here sub-level-1"><a href="#">Sub Menu Item One</a></li> 
     <li class="last sub-level-1"><a href="#">Sub Menu Item Two</a></li> 
    </ul> 
</li>                       

而jQuery的我目前擁有的是：

$(document).ready(function() { 

// Show the children of the first product on page load but leave the others hidden 
$("ul#nav-sub li.parent-here ul").show(); 

// Then attach a visibility toggle to each of the parents 
if ($("ul#nav-sub li.sub-level-0 ul").size > 0) { 
    $("ul#nav-sub li.sub-level-0 > a").click(function(){ 
     $(this).next().slideToggle("slow"); 
     return false; //Prevent the browser jump to the link anchor 
    }); 
} 

}）;

這是最接近我可以完全工作，但唯一不起作用的是切換動畫。它不是緩慢的過渡，而是簡單地跳開。

我基本上想要的是獲得緩慢的過渡效果，但也只返回假（如果菜單項有任何子節點，則返回false（阻止鏈接錨點的默認瀏覽器操作）（子菜單 - 如上面的Menu第二項）。我需要Menu Item One返回true並直接進入該頁面。

感謝

Answer 1

林喜歡你，喜歡去理出頭緒來學習...我認爲這是一件容易的事，但哎呀我花了30分鐘的調試該死的東西..

見http://jsfiddle.net/QcBNK/92/

HTML：

<ul id="nav-sub"> 
    <li class="sub-level-0"><a href="#">Menu Item One</a> 
    <ul> 
     <li class="sub-level-1"><a href="#">Sub Menu Item One</a></li> 
     </ul> 
     </li> 
    <li class="sub-level-0"><a href="#">Menu Item Two</a> 
     <ul> 
       <li class="sub-level-1"><a href="#">Sub Menu Item One</a></li> 
       <li class="sub-level-1"><a href="#">Sub Menu Item Two</a></li> 
     </ul> 
     </li>  
</ul> 

JQuery的：

$(document).ready(function() { 
    //hide all SUB elements 
    $(".sub-level-1").hide(); 
    //attach click to top elements only 
    $("li.sub-level-0").mousedown(function(evt) { 
     //find the sub element and toggle it.. 
     if(($(evt.target).text().indexOf("Sub"))!=0) {//Bad hack! sry =(
     $(this).find("ul .sub-level-1").slideToggle(); 
     } 
    }); 

}); 

注：林不是專家。我後來注意到，子項元素拋出事件，奇怪的是find（）方法返回一個孩子<ul>即使子元素扔事件！？所以我無法使用evt.target==this來測試冒泡事件。子元素事件返回整個父李！ = S所以我狠狠地投了！也許有更好的方法。

Answer 2

HTML：

<dl> 

<dt><a href="#">Menu Item One</a></dt> 
<dd> 
    <ul> 
     <li><a href="#">Sub Menu Item One</a></li>   
    </ul> 
</dd> 

<dt><a href="#">Menu Item Two</a></dt> 
<dd> 
    <ul> 
     <li><a href="#">Sub Menu Item One</a></li> 
     <li><a href="#">Sub Menu Item Two</a></li> 
    </ul> 
</dd> 

<dt><a href="#">Menu Item Three</a></dt> 
<dd> 
    <ul> 
     <li><a href='#'>Sub Menu Item One</a></li> 
     <li><a href='#'>Sub Menu Item Two</a></li> 
     <li><a href='#'>Sub Menu Item Three</a></li>    
    </ul> 
</dd> 

</dl> 

JQuery的：

<script> 
    $("dd").hide(); 

    $("dt a").click(function(e) { 
     $(e.target).parent().next().slideToggle(); 
    }); 
</script>