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

我喜欢你，喜欢把事情弄清楚......我觉得这很容易但是jeez我花了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来测试冒泡事件。子元素事件返回整个父li！ = 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>

jQuery手风琴菜单

2 个答案: