Jquery 如何在单击div后保持其悬停状态？

我有一个导航菜单，我希望列表项的悬停状态仍然是“悬停”的，即使我点击了它，即使它隐藏了。我希望在单击另一个列表项之前，它始终保持悬停状态。我该怎么做

这里是JSFidde链接 另外，jQuery在这个JSFIDLE链接中不起作用，我不知道为什么

谢谢你抽出时间

$(document).on('ready', function() {
$("#menutoggle").click(function () {
    $(this).toggleClass("hov");
});


$('#menutoggle').click(function(){
    $('#mobilemenu').toggle('blind');
});


$("#mobilemenu li").one("mouseover", function() {
    $("#mobilemenu li").toggleClass('hover');
});

---

})

只需在单击的元素中添加一个“hover”类，将其从其他列表项中删除并设置样式：

$(function() {
    $("#menutoggle").click(function () {
        $(this).toggleClass("hov");
    });


    $('#menutoggle').click(function(){
        $('#mobilemenu').toggle('blind');
    });


    $("#mobilemenu li").click(function() {
        $("#mobilemenu li").removeClass('hover');
        $(this).addClass('hover');
    });
});

CSS:

---

jsiddle:

$（document）.on（'ready'，handler）

语法错误，内部不使用ready promise。因此，因为您将代码包装在JSFIDLE中的

onload

处理程序中，所以现在启动ready伪事件已经太迟了。改用相关语法，例如：

$（document）.ready（handler）#mobilemenu li:hover,
#mobilemenu li.hover {
    -webkit-box-shadow: inset -4px 0px 0px 0px #f1163c;
    -moz-box-shadow: inset -4px 0px 0px 0px #f1163c;
    box-shadow: inset -4px 0px 0px 0px #f1163c;
    background: #17181c;
}