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

Question

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

这是 JSFidde 链接 https://jsfiddle.net/dpcrpfj5/26/ 另外 jQuery 在这个 JSFiddle 链接中不起作用我不知道为什么..

谢谢你的时间

$(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');
});

})

Answer 1

只需将“悬停”类添加到被点击的元素，将其从所有其他列表项中移除并为其设置样式:

$(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:

#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;
}

JSFiddle:https://jsfiddle.net/dpcrpfj5/28/