Question

我有一个菜单和一个子菜单。我通过结合stackoverflow和api.jQuery的一些答案让它在Jquery中切换。但现在我真的陷入困境，我无法找到解决问题的方法。每当我到达菜单时，子菜单切换（好事），但每当我到达子菜单链接时，它就会消失。

由于它的造型，它在小提琴中不起作用，这就是为什么我没有把它放在那里。

HTML

<ul id="menüü">
    <li class="menu">
        <p><a href="meist.html">Meist</a>

        </p>
        <ul class="submenu">
            <li class="asi1">Asi 1</li>
            <li class="asi2">Asi 2</li>
            <li class="asi3">Asi 3</li>
        </ul>
    </li>
    <li class="menu">
        <p><a href="seadmed.html">Seadmed</a>

        </p>
        <ul class="submenu">
            <li class="item1">Item 1</li>
            <li class="item2">Item 2</li>
            <li class="item3">Item 3</li>
        </ul>
    </li>
</ul>
<div id="submenu"></div>

CSS

.menu {
    display: inline;
    float:left;
    width:180px;
    height:50px;
    color:#191919;
    text-align:center;
    background:#990000;
    -moz-border-radius-top-left: 50px;
    border-top-left-radius: 50px;
    position:relative;
}
.submenu {
    font-size:14px;
    display:none;
    position:absolute;
    top:62px;
    right:25%;
    z-index:300
}
.submenu {
    background-color:#cecece;
}
.submenu > li {
    list-style-type:none;
    background-color:#fff;
    color:blue;
    cursor:pointer;
}
#submenu {
    color:white;
    height:40px;
    width:900px;
    background:#630000;
    margin-top:50px;
    position:relative;
}

JS

$(document).ready(function () {
    $("li.menu").mouseenter(function () {
        $(this).find(".submenu").toggle();
    });
});

Answer 1

将mouseenter更改为mouseover，然后当您将子元素悬停时，它将不会关闭。并使用mouseover显示并隐藏mouseout。

Example on jsFiddle

$(document).ready(function () 
{
    $(".menu").mouseover(function () 
    {
        $(this).find(".submenu").show();
    });

    $(".menu").mouseout(function () 
    {
        $(this).find(".submenu").hide();
    });
});

Answer 2

切换显示和隐藏之间的切换，因此第一次触发mouseenter事件时，它将显示，第二次隐藏。您需要添加一个条件语句，以确保它在鼠标悬停时不会隐藏它。更好的方法是使用mouseenter显示并mouseout隐藏。

Answer 3

不是一个完美的例子，但这个纯粹的CSS版本应该为你提供一个良好的基础吗？

http://jsfiddle.net/bNpnZ/2/

<ul class="menu">
    <li> <a href="meist.html">Meist</a>

        <ul class="submenu">
            <li class="asi1">Asi 1</li>
            <li class="asi2">Asi 2</li>
            <li class="asi3">Asi 3</li>
        </ul>
    </li>
    <li> <a href="seadmed.html">Seadmed</a>

        <ul class="submenu">
            <li class="item1">Item 1</li>
            <li class="item2">Item 2</li>
            <li class="item3">Item 3</li>
        </ul>
    </li>
</ul>

ul {
    margin:0;
    list-style:none;
}

.menu {
    width:100%;
    float:left;
    background:#eee;
}
.menu > li {
    float:left;
    margin:0 0 0 10px;
    position:relative;
}
.menu > li:first-child {
    margin:0;
}
.menu > li > a {
    padding:10px 20px;
    float:left;
    color:#666;
}
.submenu {
    position:absolute;
    top:-9999em;
    left:0;
    font-size:14px;
    background-color:#ccc;
}
.menu > li:hover .submenu {
    top:30px;
}

Answer 4

我已经更新了jquery并为.menu a添加了样式，并且在{li>一侧不需要<p>。

的jQuery

$('.menu').hover(
function () {
    $(this).children('.submenu').fadeIn('fast');
},
function () {
    $(this).children('.submenu').fadeOut();
});

CSS

.menu a{
    display:block;
    line-height:50px;
}
.submenu {
    font-size:14px;
    display:none;
    position:absolute;
    top:50px;
    right:25%;
    z-index:300
}

HTML

 <ul id="menüü">
    <li class="menu">
        <a href="meist.html">Meist</a>
        <ul class="submenu">
            <li class="asi1">Asi 1</li>
            <li class="asi2">Asi 2</li>
            <li class="asi3">Asi 3</li>
        </ul>
    </li>
    <li class="menu">
        <a href="seadmed.html">Seadmed</a>
        <ul class="submenu">
            <li class="item1">Item 1</li>
            <li class="item2">Item 2</li>
            <li class="item3">Item 3</li>
        </ul>
    </li>
</ul>

jsFiddle File

一旦用鼠标到达子菜单，子菜单就会消失

4 个答案: