Question

我有一个导航菜单，在悬停时子菜单向下滑动。菜单结构如下：

<ul class='nav'>
  <li><a href='#'>About</a></li>
  <ul class='submenu'>
    <li><a href='#'>Stuff</a></li>
  </ul>
</ul>

等。

我创建幻灯片所做的工作如下：

$('ul.nav li').hover(function(){
  $el = $(this);
  $el.next('.submenu').slideToggle(); # they all have submenus, so this works for now
},function(){
  $el = $(this);
  $el.next('.submenu').slideToggle();
});

但是，使用此方法，当您将鼠标移离主LI时，子菜单会崩溃。我通过删除mouseout上的崩溃来修复此问题，然后为子菜单创建了一个mouseout事件（即：当鼠标离开子菜单时，它会崩溃）。但是，在此设置中，如果您碰巧鼠标移到主LI上，然后在没有鼠标的情况下离开菜单，子菜单将保持打开状态（显然）。

我应该如何以正常运作的方式处理这个问题，并让我让它优雅地降级？

注意：我也尝试在li中包含ul（＆lt; li＆gt;＆lt; a href＆gt; Stuff＆lt; / a＆gt;＆lt; ul class ='submenu'＆gt;＆lt; li＆gt;＆lt; / li＆gt;＆lt; / ul＆gt;）但我需要子菜单隐藏在主LI图像后面，并且在该设置中使用z-index是不可能的。）

Answer 1

您应该重新构建一些代码以使其有效，如下所示：

<ul class='nav'>
  <li><a href='#'>About</a>
    <ul class='submenu'>
      <li><a href='#'>Stuff</a></li>
    </ul>
  </li>
</ul>

z-indexing的错误你对此我不理解......你应该添加它或专门询问一个新问题，因为你的HTML 应该就像这样。< / p>

这可以让你将鼠标悬停在同一个元素中......并且<ul>无论如何都不能是<ul>的子节点，它是无效的HTML（即使浏览器通常会渲染它）。

然后你可以像这样使用jQuery：

$('ul.nav li').hover(function(){
  $(this).children('.submenu').stop(true, true).slideToggle();
});

You can give it a try here，.stop()调用添加是为了防止动画队列建立。

Answer 2

这是一个例子

<style type="text/css">
    .menucontrol a:link, .menucontrol a:active, .menucontrol a:visited
    {
        border: 1px solid orange;
        color: white;
        background-color: orange;
    }
    .menucontrol a:hover
    {
        background-color: #fff;
        color: #333;
    }
    .menucontrol, .menucontrol ul
    {
        margin: 0;
        padding: 0;
        list-style-type: none;
        list-style-position: outside;
        position: relative;
        line-height: 1.5em;
    }
    .menucontrol a:link, .menucontrol a:active, .menucontrol a:visited
    {
        display: block;
        padding: 0px 5px;
        text-decoration: none;
    }
    .menucontrol li
    {
        float: left;
        position: relative;
    }
    .menucontrol ul
    {
        position: absolute;
        width: 12em;
        top: 1.5em;
        display: none;
    }
    .menucontrol li ul a
    {
        width: 12em;
        float: left;
    }
    .menucontrol ul ul
    {
        top: auto;
    }
    .menucontrol li ul ul
    {
        left: 12em;
        margin: 0px 0 0 10px;
    }
    .menucontrol li:hover ul ul, .menucontrol li:hover ul ul ul, .menucontrol li:hover ul ul ul ul
    {
        display: none;
    }
    .menucontrol li:hover ul, .menucontrol li li:hover ul, .menucontrol li li li:hover ul, .menucontrol li li li li:hover ul
    {
        display: block;
    }
</style>

<body style="font-family: Consolas; font-size: 11px;">
<ul class="menucontrol">
    <li><a href="#">1 HTML</a></li>
    <li><a href="#">2 CSS</a></li>
    <li><a href="#">3 Javascript</a>
        <ul>
            <li><a href="#">3.1 jQuery</a>
                <ul>
                    <li><a href="#">3.1.1 Download</a><ul>
                        <li><a href="#">3.1.1 Download</a><ul>
                            <li><a href="#">3.1.1 Download</a></li>
                            <li><a href="#">3.1.2 Tutorial</a></li>
                        </ul>
                        </li>
                        <li><a href="#">3.1.2 Tutorial</a></li>
                    </ul>
                    </li>
                    <li><a href="#">3.1.2 Tutorial</a></li>
                </ul>
            </li>
            <li><a href="#">3.2 Mootools</a></li>
            <li><a href="#">3.3 Prototype</a></li>
        </ul>
    </li>
</ul>

<script type="text/javascript">
function mainmenu()
{
    $(" .menucontrol ul ").css({ display: "none" }); // Opera Fix
    $(" .menucontrol li").hover(function()
    {
        $(this).find('ul:first').css({ visibility: "visible", display: "none" }).show(400);
    }, function()
    {
        $(this).find('ul:first').css({ visibility: "hidden" });
    });
}

$(document).ready(function()
{
    mainmenu();
});

滑动菜单问题

2 个答案: