0

我有一个菜单和一个子菜单。我通过结合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();
    });
});
4

4 回答 4

2

当您将子元素悬停时，更改mouseenter为mouseoverthen 不会关闭。并用于mouseover显示和mouseout隐藏。

jsFiddle 上的示例

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

    $(".menu").mouseout(function () 
    {
        $(this).find(".submenu").hide();
    });
});
于 2013-06-04T08:19:58.163 回答
1

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

于 2013-06-04T07:46:05.417 回答
1

无论如何都不是一个完美的例子，但是这个纯 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;
}
于 2013-06-04T07:55:06.750 回答
1

我已经更新了 jquery 并添加了样式.menu a，<p>在 li 中也不需要。

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 文件

于 2013-06-04T08:14:43.913 回答