Question

我有一个Nav菜单，我希望列表项的悬停状态仍然是“悬停”，即使我点击它，即使它隐藏了。我想让它一直悬停，无论如何，直到我点击另一个列表项。我该怎么做？

这是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

只需添加＆＃39; hover＆＃39;对于单击的元素的类，将其从每个其他列表项中删除并设置其样式：

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

即使点击它后，如何保持div的悬停状态？

1 个答案: