jQuery 手风琴菜单

Question

这只是关于 jQuery 的一个非常新手的问题，但我只是用它来创建一个简单的手风琴菜单。 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
    });
}

});

这是我可以让它完全正常工作的最接近的方法，但唯一不起作用的是切换动画。它不是一个缓慢的过渡，而是直接打开。

我基本上想要的是获得缓慢的过渡效果，但如果菜单项有任何子项（子列表 - 如上面菜单项所示二）。我需要菜单项一返回 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>