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>