使用jQuery为Joomla创建子菜单

我有一个新问题。我想为我的joomla网站创建一个jQuery的子菜单。菜单如下：使用jQuery为Joomla创建子菜单

<ul id="submenu"> 
    <li><a href="#">Link</a></li> 
    <li class="parent"> 
     <a href="#">Submenu 1</a> 
     <ul> 
      <li><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li> 
     </ul> 
    </li> 
    <li class="parent"> 
     <a href="#">Submenu 2</a> 
     <ul> 
      <li><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li> 
     </ul> 
    </li> 
     <li class="parent"> 
     <a href="#">Submenu 3</a> 
     <ul> 
      <li><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li> 
     </ul> 
    </li> 
    <li><a href="#">Link</a></li> 
    <li><a href="#">Link</a></li> 
</ul>

所以不是所有的元素都有子元素。我该怎么做？我已经试过这样：

// hide all elements onload 
$("#submenu > li.parent > ul").hide(); 

$("#submenu li.parent").hover(function() { 
    $(this).find("ul").slideDown("slow"); 
});

但我不知道，如果用户用鼠标从菜单移开我如何关闭子菜单。我想在显示子菜单之前关闭其他openend菜单。任何人都可以帮助我吗？

感谢

来源

2012-11-16 user1686123

是否有一个原因需要是jQuery而不是纯CSS？ – gotohales

您可以使用mouseenter/mouseleave

$("#submenu li.parent").mouseenter(function() { 
    $(this).find("ul").slideDown("slow"); 
}).mouseleave(function() { 
    $(this).find("ul").slideUp("Slow"); 
});

可是我最好还是去纯CSS的解决方案。

http://jsfiddle.net/QEWvm/

CSS3样品溶液：http://jsfiddle.net/qzP7s/

来源

2012-11-16 15:33:45

+1。但是，它可以使用Css做jQuery效果？ –

如果你的意思是动画（slideUp和slideDown），比“支持css3转换的浏览器是”。检查这个小提琴http://jsfiddle.net/R8zca/4/（不是我的） –

Thanks.also，我的意思是所有的动画（不只是幻灯片）。 –

如果与jQuery的溶液去，我会至少推荐添加.stop()前.slideUp()以考虑可能导致动画排队任何鼠标移动。所以这个代码在这里结束http://jsfiddle.net/QEWvm/4/

问题

$("#submenu li.parent").mouseenter(function() { 
    $(this).find("ul").slideDown("slow"); 
}).mouseleave(function() { 
    $(this).find("ul").stop().slideUp("Slow"); 
});

拨弄这种方法是，它虽然无法访问，如.hide()套display:none其屏幕阅读器会忽略。

更好的解决方案（如果你生活中可以没有动画，或希望使用CSS3推测出来）会使用定位和伪类实现与像这样

#submenu > li.parent > ul { position: absolute; left: -9999px; } 

#submenu li.parent:hover ul { 
    left: 90px;   
}

这拨弄类似http://jsfiddle.net/QEWvm/5/显示它工作。

来源

2012-11-16 15:48:52 gotohales

使用jQuery为Joomla创建子菜单

回答

相关问题