Question

我想检查链接“meist”是否被点击，如果点击它，则将子菜单更改为submeist。因此，如果您将鼠标悬停在外，它将自动返回到子菜单菜单
当我想点击子菜单上的某些内容时子菜单会消失，我也无法弄清楚它的修复。

HTML

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

<div id="submenu">
    <ul id="submeist">
        <li class="asi1">
            Asi 1
        </li>
        <li class="asi2">
            Asi 2
        </li>
        <li class="asi3">
            Asi 3
        </li>
    </ul>

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

CSS

#meist {  
    display: inline;
    float:left;
    width:180px;  
    height:50px;  
    color:#191919;  
    text-align:center;  
    overflow:hidden; 
    background:#990000;
    -moz-border-radius-top-left: 50px;
    border-top-left-radius: 50px;
} 
#meist:hover {  
    text-decoration: underline;
    color: white;
    font-size: 17.5px; 
    line-height: 15px;
} 
#seadmed {  
    display: inline;
    float:left;
    width:180px;  
    height:50px;  
    color:#191919;  
    text-align:center;  
    overflow:hidden; 
    background:#990000;
}  
#seadmed:hover {  
    text-decoration: underline;
    color: white;
    font-size: 17.5px; 
    line-height: 15px;
} 
#submenu {
    color:white;
    height:25px;
    width:900px;
    background:#630000;
    margin-top:50px;
}
#submeist  {   
    display:none;
    font-size:12px;
}
#submeist .asi1 {
    margin-left:70px;
    height:25px;
    width:75px;
}
#submeist .asi2 {
    margin-left:25px;
}
#submeist .asi3 {
    margin-left:25px;
}
#subseadmed {   
    display:none;
    font-size:12px;
}
#subseadmed .item1 {
    margin-left:70px;
    height:25px;
    width:75px;
}
#subseadmed .item2 {
    margin-left:25px;
}
#subseadmed .item3 {
    margin-left:25px;
}

JS

$(document).ready(function () {
    $("#meist").mouseleave(function () {
        $("#submeist").hide();
        return false;
    });

    $("#meist").mouseenter(function () {
        $("#submeist").show();
        return false;
    });

    $("#seadmed").mouseleave(function () {
        $("#subseadmed").hide();
        return false;
    });

    $("#seadmed").mouseenter(function () {
        $("#subseadmed").show();
        return false;
    });
});

Answer 1

我猜你可以通过添加

延迟隐藏队列

 $("#meist").mouseleave(function () { 
    $("#submeist").delay(1000).hide('fast');
    return false; 
});

和

   $("#seadmed").mouseleave(function () { 
    $("#subseadmed").delay(1000).hide('fast');
    return false;

小心延迟阙。仅在必要时添加。这可能是临时解决方案之一，这不是唯一的解决方案。

根据要求增加隐藏子菜单的时间。

jQuery悬停并检查是否单击了链接

1 个答案: