悬停时滑动菜单问题

时间:2013-01-10 05:07:50

标签: jquery html

这是我的问题的链接。 请帮我修复滑动菜单保持稳定,直到可以选择菜单中的子菜单链接。

我尝试过以下代码

HTML

<div id="menu">
<ul id="tabs">
<li id="tabsli"><a href="#">Home</a></li>
<li id="tabsli"><a href="#tab1">Tab1</a></li>

<div id="tab1" class="subtabs">
    <ul>
    <li id="tabsli1"><a href="slideshow.html">slideshow</a></li>
    <li id="tabsli1"><a href="#">Tab1-2</a></li>
    <li id="tabsli1"><a href="#">Tab1-3</a></li>
    </ul>
</div>

<li id="tabsli"><a href="#tab2">Tab2</a></li>

<div id="tab2" class="subtabs">
    <ul>
    <li id="tabsli1"><a href="RegForm.html">Register</a></li>
    <li id="tabsli1"><a href="Pagination.html">Simple Pagination</a></li>
    <li id="tabsli1"><a href="#">Tab2-3</a></li>
    </ul>
</div>
<li id="tabsli"><a href="#"> Contact Us</a></li>
</ul>


</div>

jquery的

$(document).ready(function(){
  menu();
    function menu(){
        $('.subtabs').hide();
    $("#tabs a").hover(function(){
      $(this.hash).slideToggle("slow");
    });
 };
});

JsFiddle

1 个答案:

答案 0 :(得分:0)

您无法在<div>代码的中间添加<ul>代码。这是糟糕的html语法。您要做的是将<div>(子菜单)添加到用于打开子菜单的<li>。应在<li>标记上使用悬停方法,以隐藏和显示<div>