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
    });
}

});

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

我基本上想要的是获得缓慢的过渡效果，但如果菜单项有任何子项（子列表 - 如上面的菜单项二所示），也只返回 false（防止跟随链接锚点的默认浏览器操作）。我需要菜单项一返回 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() 返回一个子元素

即使子元素抛出事件！？所以我无法使用 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>